@charset "utf-8";
/* CSS Document */

/*ローディング画面*/

.start {
	background: #FCFAEB;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 178px;
}

/*-----------------------------------------------------------*/

/*ファーストビュー*/
section#firstview{
    width: 100%;
    height: 385px;
    margin: -37px auto 0;/*50*/
    background: url("../image/top/main_bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
}
#firstview .inner{
    width: 100%;
    margin: 0 auto;
}

#firstview .parts01{
    width: 202px;
    height: 210px;
    position: absolute;
    top: 30px;
    left: 0;
}
#firstview .parts02{
    width: 155px;
    height: 255px;
    position: absolute;
    top: 50px;
    right: 0;
}

#firstview .logo{
    width: 178px;
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    margin: auto;
}
#firstview .logo img{
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.30));
}
 
#firstview .catch{
    width: 80.97%;/*583*/
    position: absolute;
    bottom: -38px;
    left: 0;
    right: 0;
    margin: auto;
}

/*-----------------------------------------------------------*/
/*section共通*/

section h2.headline{
}
section h2.headline:not(:first-of-type){
	margin-top: 3.38rem;/*50*/
}
section h2.headline dl{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    line-height: 100%;
}
section h2.headline dl dt{
    color: #00ADA9;
    padding-bottom: 13px;
}
section h2.headline dl dd{
    color: #333;
    position: relative;
    z-index: 1;
}
section h2.headline dl dd::before{
    content: '';
    display: block;
    width: calc( 100% + 24px );
    height: 6px;
    background-color: #E6F00F;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
}

/*-----------------------------------------------------------*/
/*TOPICS*/

#contents01{
}
#contents01 .inner{
    margin: 70px auto 0;
}

#contents01  h2.headline dl dt{
    font-size: 37px;
}
#contents01  h2.headline dl dd{
    font-size: 22px;
}

#contents01 .catlists{
    margin: 12px auto 0;/*35*/
}
#contents01 .catlists ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 5px;
}
#contents01 .catlists ul li{
    width: calc( 100% / 2 - 5px );
    height: 30px;
}
#contents01 .catlists ul li a{
    width: calc( 100% - 42px );
    height: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #AAA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;    
    background-color: #fff;
    padding-left: 42px;
    font-size: 12px;
    font-weight: 700;
    position: relative;
}
#contents01 .catlists ul li a::before{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 10px;
}
#contents01 .catlists ul li.active a{
    color: #fff;
}
#contents01 .catlists ul li:nth-child(1) a{
    width: 100%;
    justify-content: center;
    border: 1px solid #AAA;
    background-color: #fff;
    padding-left: 0;
}
#contents01 .catlists ul li:nth-child(1).active a{
    border: 1px solid #00ADA9;
    background-color: #00ADA9;
}
#contents01 .catlists ul li:nth-child(2).active a{
    border: 1px solid #916AAC;
    background-color: #916AAC;
}
#contents01 .catlists ul li:nth-child(2) a::before{
    background: url("../image/top/caticon01.png") no-repeat, url("../image/top/caticon01h.png") no-repeat;
    background-size: contain, 0 0;
}
#contents01 .catlists ul li.active:nth-child(2) a::before{
    background: url("../image/top/caticon01h.png") no-repeat;
    background-size: contain;
}
#contents01 .catlists ul li:nth-child(3).active a{
    border: 1px solid #9AC717;
    background-color: #9AC717;
}
#contents01 .catlists ul li:nth-child(3) a::before{
    background: url("../image/top/caticon02.png") no-repeat, url("../image/top/caticon02h.png") no-repeat;
    background-size: contain, 0 0;
}
#contents01 .catlists ul li.active:nth-child(3) a::before{
    background: url("../image/top/caticon02h.png") no-repeat;
    background-size: contain;
}
#contents01 .catlists ul li:nth-child(4).active a{
    border: 1px solid #F08500;
    background-color: #F08500;
}
#contents01 .catlists ul li:nth-child(4) a::before{
    background: url("../image/top/caticon03.png") no-repeat, url("../image/top/caticon03h.png") no-repeat;
    background-size: contain, 0 0;
}
#contents01 .catlists ul li.active:nth-child(4) a::before{
    background: url("../image/top/caticon03h.png") no-repeat;
    background-size: contain;
}
#contents01 .catlists ul li:nth-child(5).active a{
    border: 1px solid #D3B000;
    background-color: #D3B000;
}
#contents01 .catlists ul li:nth-child(5) a::before{
    background: url("../image/top/caticon04.png") no-repeat, url("../image/top/caticon04h.png") no-repeat;
    background-size: contain, 0 0;
}
#contents01 .catlists ul li.active:nth-child(5) a::before{
    background: url("../image/top/caticon04h.png") no-repeat;
    background-size: contain;
}
#contents01 .catlists ul li:nth-child(6).active a{
    border: 1px solid #1CBCC9;
    background-color: #1CBCC9;
}
#contents01 .catlists ul li:nth-child(6) a::before{
    background: url("../image/top/caticon05.png") no-repeat, url("../image/top/caticon05h.png") no-repeat;
    background-size: contain, 0 0;
}
#contents01 .catlists ul li.active:nth-child(6) a::before{
    background: url("../image/top/caticon05h.png") no-repeat;
    background-size: contain;
}
#contents01 .catlists ul li:nth-child(7).active a{
    border: 1px solid #E484A0;
    background-color: #E484A0;
}
#contents01 .catlists ul li:nth-child(7) a::before{
    background: url("../image/top/caticon06.png") no-repeat, url("../image/top/caticon06h.png") no-repeat;
    background-size: contain, 0 0;
}
#contents01 .catlists ul li.active:nth-child(7) a::before{
    background: url("../image/top/caticon06h.png") no-repeat;
    background-size: contain;
}
#contents01 .catlists ul li:nth-child(8).active a{
    border: 1px solid #EE4500;
    background-color: #EE4500;
}
#contents01 .catlists ul li:nth-child(8) a::before{
    background: url("../image/top/caticon07.png") no-repeat, url("../image/top/caticon07h.png") no-repeat;
    background-size: contain, 0 0;
}
#contents01 .catlists ul li.active:nth-child(8) a::before{
    background: url("../image/top/caticon07h.png") no-repeat;
    background-size: contain;
}

/*投稿*/
#contents01 .posts {
    display: none;
    opacity: 0;
}
#contents01 .posts.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#contents01 .posts ul{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px 11px;
    justify-content: space-between;
}

/*ピックアップ*/
#contents01 .posts li.pickup{
    width: 100%;
    border: 2px solid #00ADA9;
    box-sizing: border-box;
    background-color: #fff;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
#contents01 .posts li.pickup a{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
}
#contents01 .posts li.pickup a dl {
    margin: 15px 5px;
    display: flex;
    align-items: flex-start;
}
#contents01 .posts li.pickup a dl dt{
    z-index: 0;
    text-align: center;
}
#contents01 .posts li.pickup a dl dt img{
    width: 90%;
    height: auto;
}
#contents01 .posts li.pickup a dl dt .cat {
    top: -8px;
}
#contents01 .posts li.pickup a dl dt .cat span{
    width: 12px;
    height: 12px;
    background-color: orange;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 4px;
}
#contents01 .posts li.pickup a dl dd {
    width: calc( 85% - 20px );
    margin: 0 auto;
}
#contents01 .posts li.pickup a dl dd .pickiup{
    font-size: 18px;
    color: #FF626E;
}
#contents01 .posts li.pickup a dl dd::before{
    bottom: 0px;
}

/*通常*/
#contents01 .posts li{
    width: calc( 100% / 2 - 14px );
}
#contents01 .posts li a{
    display: block;
}
#contents01 .posts li dl{
    width: 100%;
    height: 100%;
}
#contents01 .posts li .date{
    font-size: 12px;
    color: #888;
}
#contents01 .posts li a dl{
    margin-top: 15px;
}
#contents01 .posts li a dl dt{
    position: relative;
    z-index: -1;
}
#contents01 .posts li a dl dt img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
#contents01 .posts li a dl dt .cat{
    position: absolute;
    top: -13px;
    left: 0;
    padding: 5px 7px;
    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #333;
    box-sizing: border-box;
}
#contents01 .posts li a dl dt .cat span{
    width: 12px;
    height: 12px;
    background-color: #000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 4px;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.news {
    background-color: #EE4500;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.event {
    background-color: #F08500;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.activities {
    background-color: #9AC717;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.city, #contents01 .posts li:not(.pickup)  a dl dt .cat span.ehime, #contents01 .posts li:not(.pickup)  a dl dt .cat span.training, #contents01 .posts li:not(.pickup)  a dl dt .cat span.organization{
    background-color: #C4EF4A;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.recruit {
    background-color: #E484A0;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.gourmet {
    background-color: #59BAC8;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.chuyo, #contents01 .posts li:not(.pickup)  a dl dt .cat span.nanyo, #contents01 .posts li:not(.pickup)  a dl dt .cat span.toyo{
    background-color: #97E1EC;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.recipe {
    background-color: #D3B000;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.blood {
    background-color: #916AAC;
}
#contents01 .posts li:not(.pickup)  a dl dt .cat span.daily, #contents01 .posts li:not(.pickup)  a dl dt .cat span.prefecture, #contents01 .posts li:not(.pickup)  a dl dt .cat span.meal{
    background-color: #D2B2E8;
}
#contents01 .posts li a dl dd{
    width: calc( 90% - 20px );
    margin: -19px auto 0; 
    background-color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    padding: 6px 10px;
    position: relative;
}
#contents01 .posts li a dl dd::before{
    content: '';
    display: block;
    background: url("../image/common/icon_arrow_green.png") no-repeat;
    background-size: contain;
    width: 20px;
    height: 11px;
    position: absolute;
    bottom: 10px;
    right: 8px;
}

#contents01 .posts .nopost{
    font-size: 17px;
    font-weight: 700;
    margin: 0 auto;
}

#contents01 .posts .tolist{
    width: 215px;
    height: 50px;
    margin: 50px auto 0;
}
#contents01 .posts .tolist a{
    font-size: 15px;
    padding-left: 0;
    justify-content: center;
}

/*-----------------------------------------------------------*/
/*movie*/

#contents02{
    margin: 68px auto 0;
    position: relative;
}
#contents02::before{
    content: '';
    display: block;
    background: url("../image/top/window_parts01.png") no-repeat;
    background-size: contain;
    width: 116px;
    height: 208px;
    position: absolute;
    top: -63px;
    right: 0;
}
#contents02::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FFDACB;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: -1;
}

#contents02 .inner{
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#contents02  h2.headline dl dt{
    font-size: 37px;
}
#contents02  h2.headline dl dd{
    font-size: 20px;
}

#contents02 .movie{
    width: 86.11%;/*620*/
    margin: 30px auto 0;
}
#contents02 .movie video{
    width: 100%;
    height: auto;
}

/*-----------------------------------------------------------*/
/*project・recipe・gourmet*/

#contents03 .inner, #contents04 .inner, #contents05 .inner{
    margin: 55px auto 0;
    position: relative;
    z-index: 1;
}
#contents03 .inner{
    margin: 75px auto 0;
}
#contents03 h2.headline dl, #contents04 h2.headline dl, #contents05 h2.headline dl{
    align-items: baseline;
}
#contents03 h2.headline dl dt, #contents04 h2.headline dl dt, #contents05 h2.headline dl dt{
    font-size: 37px;
}
#contents03 h2.headline dl dd, #contents04 h2.headline dl dd, #contents05 h2.headline dl dd{
    font-size: 20px;
}
#contents03 .img, #contents04 .img, #contents05 .img{
    margin: 33px auto 0;
}
#contents03 dl.txts, #contents04 dl.txts, #contents05 dl.txts{
    margin: 23px auto 0;
}
#contents03 dl.txts dt, #contents04 dl.txts dt, #contents05 dl.txts dt{
    font-size: 13px;
    text-align: justify;
    line-height: 180%;
}
#contents03 dl.txts dd, #contents04 dl.txts dd, #contents05 dl.txts dd{
    margin: 31px auto 0;
    font-size: 15px;
}
#contents03 .txts dd span, #contents04 .txts dd span, #contents05 .txts dd span{
    color: #FF626E;
}

#contents03 .topage, #contents04 .topage, #contents05 .topage{
    width: 215px;
    height: 50px;
    margin: 32px auto 0;
}

#contents05{
    position: relative;
}
#contents05::before{
    content: '';
    display: block;
    background: url("../image/top/window_parts01.png") no-repeat;
    background-size: contain;
    width: 116px;
    height: 208px;
    position: absolute;
    top: 45px;
    right: 0;
}
#contents05::after{
    content: '';
    display: block;
    background: url("../image/top/window_parts02.png") no-repeat;
    background-size: contain;
    width: 125px;
    height: 208px;
    position: absolute;
    bottom: -150px;
    left: 0;
}

/*-----------------------------------------------------------*/
/*contact*/

#contents06{
    position: relative;
}
#contents06::before{
    content: '';
    display: block;
    background: url("../image/top/window_parts01.png") no-repeat;
    background-size: contain;
    width: 116px;
    height: 208px;
    position: absolute;
    top: 30px;
    right: 0;
}
#contents06::after{
    content: '';
    display: block;
    background: url("../image/top/window_parts02.png") no-repeat;
    background-size: contain;
    width: 125px;
    height: 208px;
    position: absolute;
    bottom: 75px;
    left: 0;
    z-index: -1;
}
#contents06 .inner{
    margin: 115px auto 0;
    padding: 0 0 125px;
    position: relative;
    z-index: 1;
}

#contents06  h2.headline dl{
    align-items: center;
    margin: 0 auto;
}
#contents06  h2.headline dl dt{
    font-size: 37px;
}
#contents06  h2.headline dl dd{
    font-size: 20px;
}

#contents06 .bubblewrap{
    width: 100%;
    margin: 25px auto 0;
    background-color: #A2E6F0;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px; 
    position: relative;
}
#contents06 .bubblewrap::before{
    content: '';
    display: block;
    background: url("../image/top/contact02.png") no-repeat;
    background-size: contain;
    width: 36px;
    height: 27px;
    position: absolute;
    right: 115px;
    bottom: -26px;
}
#contents06 .bubblewrap::after{
    content: '';
    display: block;
    background: url("../image/top/contact05.png") no-repeat;
    background-size: contain;
    width: 95px;
    height: 95px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 32px;
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.30));
}

#contents06 .bubblewrap .inn{
    width: calc( 100% - 40px );
    padding: 30px 20px 142px;
    position: relative;
}
#contents06 .bubblewrap .inn::before{
    content: '';
    display: block;
    background: url("../image/top/contact03.png") no-repeat;
    background-size: contain;
    width: 98px;
    height: 126px;
    position: absolute;
    left: 15px;
    bottom: 0;
}
#contents06 .bubblewrap .inn::after{
    content: '';
    display: block;
    background: url("../image/top/contact04.png") no-repeat;
    background-size: contain;
    width: 102px;
    height: 114px;
    position: absolute;
    right: 15px;
    bottom: 0;
}

#contents06 .bubblewrap dl dt{
    font-size: 20px;
    text-align: center;
    position: relative;
}
#contents06 .bubblewrap dl dt::before{
    content: '';
    display: block;
    background: url("../image/top/contact01sp.png") no-repeat;
    background-size: contain;
    width: 32px;
    height: 45px;
    position: absolute;
    bottom: 0;
    left: 10px;
}
#contents06 .bubblewrap dl dt::after{
    content: '';
    display: block;
    background: url("../image/top/contact01sp.png") no-repeat;
    background-size: contain;
    width: 32px;
    height: 45px;
    position: absolute;
    bottom: 0;
    right: 10px;
    transform: scale(-1, 1);
}
#contents06 .bubblewrap dl dt span{
    color: #EE4500;
}

#contents06 .bubblewrap dl dd{
    width: 100%;
    margin: 3.04rem auto 0;/*45*/
    text-align: justify;
    line-height: 184%;
}

#contents06 .bubblewrap .tocontact{
    width: 231px;
    height: 50px;
    margin: 28px auto 0;
}

/*-----------------------------------------------------------*/
/*下部固定バナー*/
#footer_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background-color: #FFED00;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
#footer_area a{
    display: block;
    width: 90.28%;
}

#pagetop {
    bottom: 12%;
}

#checkbnr{
    display: none;
}

/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/