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

/*幅*/
.wrapper-l{width: 90%;margin: 0 auto;}
.body-wrapper .main-column{padding: 0 6rem 0 0;}
.main-column.sub-wrapper{padding: 0 6rem 0 0;}

/*index*/
.main-column.is-active{z-index: 4;}

/*あしらい*/
.title-m.is-dashed-dub{border-bottom: 2px dashed #fff;border-top: 2px dashed #fff; padding: 1rem 0;}
.list.is-dashed-dub{border-bottom: 2px dashed #fff;}
.form__content .list.is-dashed-dub{border-bottom: none;}
.list.is-dashed-dub .product__content{padding: 1.2rem 0;border-top: 2px dashed #fff;}

/*下層タイトル*/
.page-title{position: absolute;top: -250px;}

.bg-sub{width: 100vw;height: 30rem; background-color: #D1EFFF;position: absolute;display: flex;    overflow: hidden;}
.bg-sub:before{    background-image: url(../img/common/sub-bg-back.png);
    content: '';width: 100%;padding-top: 460px;position: absolute;   bottom: 0;background-repeat: no-repeat; left: 50%;margin-left: -450px;}
.bg-sub:after{background-image: url("../img/common/sub-bg-front.png");content: '';    width: 100%;
    position: absolute; bottom: 0;background-size: cover; background-repeat: no-repeat;    padding-top: 280px;    background-position-x: 90%;}


@media screen and (max-width:1500px){
	.bg-sub:before{margin-left: -350px;}
}
@media screen and (max-width:1300px){
	.bg-sub:before{margin-left: -250px;}
}
@media screen and (max-width:1000px){
	.bg-sub:before{margin-left: 0;left: 0; padding-top: 200px;    bottom: 4rem;background-size: 120%;}
	.bg-sub:after{padding-top: 120px;}
}
@media screen and (max-width:600px){
	.bg-sub:before{    padding-top: 150px;background-size: cover;}
}

/*グローバルナビ*/
.g-nav{background-color: #fff;padding: 2rem 2rem; border-radius: 30px;}
.g-nav__item{padding-top: 24px;font-size: 20px;}
.g-nav__item:first-of-type{padding-top: 0;}

.g-nav__item:before{width: 1.5rem;height: 1.5rem; background-repeat: no-repeat;display: inline-flex;background-size: contain; vertical-align: middle;margin-right: 10px;}
.g-nav__about:before{content: '';background-image:url("../img/common/svg/about.svg");}
.g-nav__publication:before{content: '';background-image:url("../img/common/svg/publication.svg");}
.g-nav__contact:before{content: '';background-image:url("../img/common/svg/contact.svg");}
.g-nav__cart:before{content: '';background-image:url("../img/common/svg/cart.svg");}
.side-column__nav{margin: 2rem 0 0 0;}


#publication .g-nav__publication{color: #0c9897;}
#about .g-nav__about{color: #0c9897;}
#cart .g-nav__cart{color: #0c9897;}
#contact .g-nav__contact{color: #0c9897;}
.side-column__nav.is-active .g-nav__item{color: #111!important;}
/*コンテンツ幅*/
.col-2 .blocks__content{width: 50%;}



@media screen and (max-width:1000px){
	.top-wrapper .main-column{padding: 0 8rem!important;}
	.body-wrapper .main-column{padding: 0 8rem!important;}
	
	
	.main-column.sub-wrapper{padding: 0 6rem;}
	.bg-sub{height: 21rem;}
	.bg-sub .sub-column{display: none;}
	
	/*ハンバーガー*/
	.toggle{position: fixed;height: 6rem;width: 6rem;    top: 0;right: 0;z-index: 40;transition: 0.6s ease-in-out;}
	.toggle span{width: 25px;height: 3px; position: absolute; left: 35px; background: #0c9897; border-radius: 15vw; display: block;transition: 0.2s ease-in-out;}
	.toggle span:first-child{top:40px;}
	.toggle span:nth-child(2){top:48px;}
	.toggle span:nth-child(3){top:56px;}
	.toggle.is-active span:nth-child(2){display: none;}
	.toggle.is-active span:first-child{transform: rotate(45deg);  top:48px;}
	.toggle.is-active span:nth-child(3){transform: rotate(-45deg);top:48px;}
	.g-nav-wrapper_logo{width: 12rem;z-index: 31;position: relative;}
	.g-nav-wrapper_logo.is-active{position: fixed;}
	
	.g-nav{ 
	position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    z-index: 30;
    border-radius: 0;
    flex-direction: column;
    align-items: center;
	margin-top: 0;
	opacity: 0; 
	pointer-events: none;
	transition: 0.4s;
	padding: 18% 0 0 0;
}
.g-nav.is-active{opacity: 1;pointer-events:painted;}
.g-nav__item{    width: 16rem;border-top: dashed 2px #0C9897; padding-top: 16px!important; padding-bottom: 16px;}
	
	.g-nav__item>a{display:block;    margin-left: 36px;}
	.g-nav__item:last-of-type{border-bottom: dashed 2px #0C9897; }
	.sub-wrapper.is-active{    z-index: 4;}
	.g-nav__item:before{    position: absolute;  margin-top: 5px;}
	.g-nav__contact:before{margin-top: 8px;}
}
@media screen and (max-width:700px){
	.top-wrapper .main-column{padding: 0 3rem!important;}
	.body-wrapper .main-column{padding: 0 3rem!important;}
	.main-column.sub-wrapper{width: 100%; padding: 0 3rem;}
}
@media screen and (max-width:480px){
	.toggle{height: 5rem;width: 5rem;}
}
/*ヘッダー・フッター*/

header{width: 400px;align-self: center;}
.hidden-menu{display: none;margin-top: 1rem;margin-left: 2rem;}
.hidden-menu li:not(:first-of-type){margin-top: 8px;}
#publication .is-active .hidden-menu{display: none;}
#publication .hidden-menu{display: block;}
.footer small{padding: 5rem 0;color: #fff;font-size: 14px;display: block;    text-align: right;}

@media screen and (max-width:1000px){
	header{width: auto;}
	header .side-column{  position: absolute;  padding: 2rem 0 2rem 2rem;min-height: 7rem;width: 100%;}
	.hidden-menu{display: block;font-size: 1rem;}
}
.side-column{width: 100%; position: static;padding: unset;}
	
	
@media screen and (max-width:700px){
	.footer small{padding: 3.5rem 0;}
}

.side-column{position: fixed; left: 0;top: 0;justify-content: center;   padding: 3rem 5rem 0 3rem;width: 400px;}
.side-column-b{position: static;}






@media screen and (max-width:480px){
	.top-wrapper .main-column{padding: 0 2rem!important;}
	.body-wrapper .main-column{padding: 0 2rem!important;}
	header .side-column{  padding: 2rem 0 2rem 1rem;}
	.main-column.sub-wrapper{width: 100%; padding: 0 2rem;}
	.footer small{padding: 2rem 0;font-size: 12px;}
}


/*ボタン*/
.button{display: inline-block;background: #0c9897!important;color: #fff;font-size: 18px;font-weight: bold;position: relative;padding: 1rem 0;max-width: 22rem; width: 100%;border-radius: 15vw!important;text-align: center;    border: 2px solid #0c9897!important;transition: 0.2s;}
.button:after{ content: '';width: 10px;height: 10px;border: 0px;border-top: solid 2px #fff; border-right: solid 2px #fff;
  -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);position: absolute;top: 50%; right: 2rem;margin-top: -4px;}

.button:hover{background: #fff!important;color: #0c9897;box-shadow:none!important;}
.button:hover:after{;border-top: solid 2px #0c9897; border-right: solid 2px #0c9897;}
.button.-link-off{background: #efefef!important; border: none!important;color: #000; font-size: 14px;pointer-events: none;}
.button.-link-off:after{display: none;}

/*セクション*/
/*サブラッパー*/
.sub-wrapper .section-wrapper .section-block:first-of-type{margin-top: -8.5rem;}

.body-wrapper .section-wrapper .section-block:first-of-type{padding-top:0; }
.section-block{padding: 8.5rem 0 0 0; }
/*.section-wrapper .section-block:first-of-type{margin-top: -6.5rem;}*/
.section-block .section-block-sub:nth-of-type(n+2){margin: 6.5rem 0 0 0;}

.top_banner{margin: 0 0 4rem 0;border-radius: 24px; overflow: hidden;}

.section-block__title{font-size: 40px;color: #fff;font-weight:bold;}
.section-block .section-block__button{margin-top: 40px;}
.section-block .block__content:not(:first-of-type){margin-top: 80px;}

.section-block__text{font-size: 18px;margin-top: 2rem;line-height: 1.8;font-weight:300;}
.section--colored .section-block__title, 
.section--colored .section-block__text{color: #111;}



/*アンケート*/
.questionnaire{margin-top: 100px;}
.questionnaire__inner{background-color: #fff;padding:40px 64px; border-radius: 30px;position: relative;}
.questionnaire__inner .title{color: #0c9897;border-bottom:2px dashed #0c9897;padding: 0 0 16px 0;font-weight: 500;    display: flex;  justify-content: space-between; align-items: end;    flex-wrap: wrap; row-gap: 8px;}
.questionnaire__inner .title .-main{font-size: 32px;line-height: 1.5;}
.questionnaire__inner .title .-sub{font-size: 14px;}
.questionnaire .text{margin-top: 24px;}
.questionnaire .text br{display:none;}
.questionnaire__inner .button{margin-top: 3rem;}
.questionnaire__inner figure{position: absolute; right: 4rem; bottom: 2rem;width: 9rem;}
@media screen and (min-width:1200px){
	.questionnaire .text{margin-top: 24px; width: 70%;}
}


@media screen and (max-width:1200px){
.body-wrapper .section-block__inner{flex-direction: column-reverse!important;}
.section-block .section-block__inner .text-wrapper {width: 100%;}
.section-block__img{padding-top: 62%; margin: 0 auto!important;}
.publication .section-block__img{width: 100%!important;border-radius: 30px 30px 0 0!important;}
/*アンケート*/
.questionnaire__inner .button{margin-top: 2rem;    max-width: 100%;}
.questionnaire__inner .col-2{flex-direction: column-reverse;align-items: center;}
.questionnaire__inner figure{    position: static;width: 8rem;margin: 1rem 0 0 0;}
.questionnaire__inner .title{font-size: 28px;}
}
@media screen and (max-width:1000px){
	.section-block,.body-wrapper .section-wrapper .section-block:first-of-type{padding: 7.5rem 0 0 0; }
	.section-block .section-block-sub:not(:first-of-type){margin: 4.5rem 0 0 0;}
	.sub-wrapper .section-wrapper .section-block:first-of-type{padding: 0;margin: 0;}
	.questionnaire{margin-top: 3rem;}
}
@media screen and (max-width:700px){
	.section-block,.body-wrapper .section-wrapper .section-block:first-of-type{  padding: 6rem 0 0 0;}
}
@media screen and (max-width:600px){
	.questionnaire__inner .title{font-size: 22px;}
	.questionnaire__inner{padding:40px 32px;}
	.questionnaire__inner .title .-main{font-size: 24px;}
	/*.questionnaire{margin-top: 140px;}*/
}
@media screen and (max-width:480px){
	.section-block,.body-wrapper .section-wrapper .section-block:first-of-type{ padding: 4.5rem 0 0 0;}
	.section-block  .concours{margin: 4.5rem 0 0 0;}
	.section-block .section-block-sub:not(:first-of-type)
	.questionnaire__inner .title{font-size: 5vw; text-align: center;}
	/*.questionnaire{margin-top: 100px;}*/
	.questionnaire__inner figure{width: 7rem;}
	.questionnaire .text{margin-top: 16px;}
	.questionnaire__inner{padding: 32px 24px;}
	
}



/*リスト*/
.dashed-list{margin: 2rem 0 0 0; border-bottom: 2px dashed #fff;}
.dashed-list__content{display: flex;align-items: start; border-top: 2px dashed #fff;padding: 16px 0;}
.dashed-list__content .date{color: #4FAE46;background-color: #fff;padding: 4px 14px;margin-right: 2rem;border-radius: 15vw;font-size: 14px;    width: 100px; text-align: center;}
.dashed-list__content p{color: #fff;line-height: 1.8;}


.small-list{color: #fff;}
.small-list .-title{font-size: 20px;margin-bottom: 16px;}
.tecyou .-list{margin-top:80px;}
@media screen and (max-width:700px){
	.tecyou .-list{margin-top:56px;}
}
@media screen and (max-width:480px){
	.tecyou .-list{    margin-bottom: 64px;}
}

/*下層*/

/*タイトル*/
.page-title{font-size: 48px;font-weight: bold;}

/*下層背景*/
.sub-bg{height: 28vw;}
.sub-bg:before{content: ''; background-image: url("../img/common/sub-bg-back.png");position: absolute;background-repeat: no-repeat; bottom: 7rem; width: 56%;left: 26%;
    padding-top: 19.5%;z-index: 2;background-size: contain;}
.sub-bg:after{content: ''; background-image: url("../img/common/sub-bg-front.png");position: absolute;background-repeat: no-repeat;bottom: 0;left:0; width: 100%;  padding-top: 15.3%;;z-index:4;background-size: cover;}
.sub-wrapper .main-title{font-size: 40px; font-weight: bold;position: absolute; top: 40%;}
.mfp_thanks .main-wrapper{height: 100vh;}

/*間隔*/