@charset "UTF-8";

/* ==================================================
  /sumai/lineup/casart/css/casart.css
  => 注文住宅サイト　カサートスタイルシート
================================================== */


/* phbasesスタイル上書き
==================================================================================================== */
/* mobile用 */
@media screen and (max-width:768px) {
	img{
		max-width: 100%;
	}
}

img {
	max-width: 100%;
	height: auto;
	-webkit-backface-visibility: hidden;
}

/* 汎用
==================================================================================================== */
body #contents .txt_gothic,
body #contents .txt_gothic * {
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.key-color {
    color: #4c4948;
}

/* mobile用 */
@media screen and (max-width:768px) {
    .casart .c-normalw {
		padding: 0 10vw;
    }
}

/* 見出し
============================================================ */
.casart h1,
.casart h1 *,
.casart h2,
.casart h2 *,
.casart h3,
.casart h3 *,
.casart h4,
.casart h4 *,
.casart h5,
.casart h5 *,
.casart h6,
.casart h6 * {
	font-family: YakuHanMP,'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif;
	font-weight: 500;
	letter-spacing: 0.05em;
    color: #4c4948;
}


/* 本文
============================================================ */
.casart p,
.casart p * {
	font-family: YakuHanMP,'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt" 1;
	-webkit-text-size-adjust: 100%;
	font-size : 16px;
	font-weight: 400;
	letter-spacing: 0.05em;
}

/* 注釈
============================================================ */
#contents .notes {
    font-size: 12px;
    text-indent: -1em;
    padding-left: 1em;
    text-align: left;
    text-align: justify;
    text-justify: inter-cluster;/*IE*/
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#contents .notes-blk {
    margin: 40px 0 0px;
    text-align: left;
}
#contents .notes-blk p {
    font-size: 12px;
    text-indent: -1em;
    padding-left: 1em;
    text-align: justify;
    text-justify: inter-cluster;/*IE*/
}
#contents .notes.indent-none {
    text-indent: 0;
    padding-left: 0;
}
@media screen and (max-width:768px) {
    #contents .notes {
        font-size: 3vw;
        margin: 10px 0 0px;
    }
    #contents .notes-blk {
        margin: 30px 0 0px;
    }
    #contents .notes-blk p {
        font-size: 3vw;
    }
}
/* 汎用幅
============================================================ */
.w1366 {
    max-width: 1366px;
    margin: 0 auto ;
}

.w560 {width: 526px;}
.w540 {width: 540px;}
.w530 {width: 530px;}
.w526 {width: 526px;}
.w490 {width: 490px;}
.w480 {width: 480px;}
.w450 {width: 450px;}
.w440 {width: 440px;}
.w430 {width: 430px;}
.w420 {width: 420px;}
.w410 {width: 410px;}
.w390 {width: 390px;}
.w380 {width: 380px;}
.w340 {width: 340px;}

/* mobile用 */
@media screen and (max-width:768px) {
    .w1366,.w560,.w540,.w530,.w526,.w490,.w480,.w450,.w440,.w430,.w420,.w410,.w390,.w380,.w340 {
        width: 100%;
    }

}


/* LAYOUT
============================================================ */
/* HERO
==================================== */

.hero-mv {
    background-image: url("../img/hero.jpg");
    height: 860px;
    background-size: cover;
    background-position: center 60%;
    background-repeat: no-repeat;
}


/* mobile用 */
@media screen and (max-width:768px) {
    .hero-mv {
        background-image: url("../img/hero_sp.jpg");
        height: 53vw;
    }
}

/* INTRO
==================================== */
.intro{
	padding: 120px 0 0;
	color: #333333;
}
.intro h2 {
    text-align: center;
    margin: 0 auto 60px;
    position: relative;
    width: 612px;
}
.intro h2::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: -60px;
    background-color: #333333;
    width: 160px;
    height: 1px;
    transform: translate(-50%,0);
}
.intro h2 img {
    height: 84px;
    width: auto;
	
}
.intro h2 span {
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    display: block;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 1em 0 0;
	color: #333333;
}
.intro h3 {
    font-size: 34px;
    letter-spacing: 0.3em;
    padding: 60px 0;
    text-align: center;
	    color: #333333;
}
.intro p {
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.15em;
    line-height: 2.4;
}
/*.intro p:last-of-type {
    font-size: 16px;
    line-height: 2.5;
}*/
dia screen and (min-width:1800px) {
	.intro figure{
		background-image: url("../img/intro-img.jpg");
		background-size: cover;
		        background-position: center 70%;
		height: 860px;
	}

}
/* mobile用 */
@media screen and (max-width:768px) {
    .intro{
		    padding: 4vw 0 0;
	}
    .intro .c-normalw {
        padding: 0 12%;
    }
    .intro h2 {
        margin: 40px auto 30px;
		width: auto;
    }
    .intro h2::after {
        bottom: -40px;
        width: 25%;
    }
    .intro h2 img {
        height: auto;
        width: 55%;
    }
    .intro h2 span {
        font-size: 3.5vw;
        margin: 0.5em 0 0;
    }
    .intro h3 {
        font-size: 4.8vw;
        letter-spacing: 0.15em;
        padding: 50px 0 30px;
    }
    .intro p {
        font-size: 3.8vw;
        letter-spacing: 0.06em;
        line-height: 2.2;
        text-align: justify;
        text-justify: inter-cluster;/*IE*/
    }
		.intro p:last-of-type {
				font-size: 3.6vw;
				line-height: 2;
		}
		.intro figure {
			margin: 35px auto 20px;
		}
}



/* .casart
==================================== */
.casart .notes {
	line-height: 1.7;
}
@media screen and (max-width:768px) {
	.casart .notes {
		line-height: 1.5;
	}
}


/* .kodawari
==================================== */
/*.casart .kodawari .flex-cont:nth-of-type(2n) .flex-item h5,
.casart .kodawari .flex-cont:nth-of-type(2n) .flex-item p,
.casart .kodawari .flex-cont:nth-of-type(2n) .flex-item figure {
	padding-right: 76px;
}
.casart .kodawari .flex-cont:nth-of-type(2n-1) .flex-item h5,
.casart .kodawari .flex-cont:nth-of-type(2n-1) .flex-item p,
.casart .kodawari .flex-cont:nth-of-type(2n-1) .flex-item figure {
	padding-left: 76px;
}
.casart .kodawari .flex-cont .flex-item h5 {
	padding-bottom: 15px;
	border-bottom: 1px solid #4c4948;
}
.casart .kodawari .flex-cont .flex-item p {
	font-size: 15px;
	margin: 20px 0 0;
}*/

/* mobile用 */
/*@media screen and (max-width:768px) {
	.casart .kodawari .flex-cont {
		margin-top: 50px;
	}
	.casart .kodawari .flex-cont:first-of-type {
		margin-top: 0;
	}
	.casart .kodawari .flex-cont .flex-item h5,
	.casart .kodawari .flex-cont .flex-item p,
	.casart .kodawari .flex-cont .flex-item figure {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.casart .kodawari .flex-cont .flex-item p {
		font-size: 3.375vw;
	}
}*/


/* .design
==================================== */
*/*.casart .design {
	padding-bottom: 90px;
}
.casart .design h3 {
    font-size: 34px;
    letter-spacing: 0.3em;
    padding: 0 0 50px;
    text-align: center;
}
.casart .design h3 span {
	display: inline-block;
	padding-bottom: 10px;
	font-size: 24px;
}
.casart .design h3::before {
	content: '';
	display: block;
	width: 360px;
	height: 1px;
	margin: 0 auto 90px;
	background-color: #4c4948;
}
.casart .design h4 {
    font-size: 26px;
    letter-spacing: 0.15em;
    padding: 20px 0 15px;
    text-align: center;
}
.casart .design p {
    font-size: 15px;
    line-height: 2;
    text-align: center;
}
.casart .design .slick-arrow {
	transform: translateY(-50%);
}
.casart .design .slick-arrow.slick-prev {
	left: 0;
	background-image: url(../img/ico_arrow_white_01.png);
}
.casart .design .slick-arrow.slick-next {
	right: 0;
}
.casart .design .slider-for .slick-arrow {
	top: 275px;
	width: 50px;
	height: 50px;
	background-size: 9px 15px;
	border-radius: 0;
}
.casart .design .slider-nav {
	margin-top: 50px;
	padding: 0 53px;
}
.casart .design .slider-nav .slick-arrow {
	top: 66px;
}
.casart .design .slider-nav figure {
	padding: 0 10px;
}
.casart .design .slider-nav img {
	cursor: pointer;
}
.casart .design .slider-nav .slick-slide {
	position: relative;
}
.casart .design .slider-nav .slick-slide:hover::after,
.casart .design .slider-nav .slick-current::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 10px;
	width: calc(100% - 20px);
	height: 100%;
	background-color: #000;
	opacity: 0.4;
}
.casart .design .slider-nav .slick-dots li {
  border: none;
  background-color: #CCC;
}
.casart .design .slider-nav .slick-dots li.slick-active,
.casart .design .slider-nav .slick-dots li:hover {
  background-color: #000000;
}*/
/* mobile用 */
/*@media screen and (max-width:768px) {
	.casart .design {
		margin-top: 60px;
		padding-bottom: 50px;
	}
	.casart .design h3 {
		font-size: 4.8vw;
		letter-spacing: 0.15em;
		padding: 0 0 30px;
	}
	.casart .design h3 span {
		padding-bottom: 5px;
		font-size: 3vw;
	}
	.casart .design h3::before {
		width: 260px;
		height: 1px;
		margin: 0 auto 50px;
	}
	.casart .design h4 {
			font-size: 4vw;
			letter-spacing: 0.15em;
			padding: 20px 12% 15px;
			text-align: center;
	}
	.casart .design p {
		padding-left: 12%;
		padding-right: 12%;
		font-size: 3.3vw;
		letter-spacing: 0.06em;
		line-height: 1.6;
		text-align: justify;
		text-justify: inter-cluster;/*IE*//*
	}
	.casart .design .c-normalw {
		padding: 0;
	}
	.casart .design .slider-for .slick-arrow {
		top: 0;
		width: 30px;
		height: 30px;
		background-size: 6px 10px;
	}
	.casart .design .slider-nav {
		margin-top: 35px;
		padding: 0 12%;
	}
	.casart .design .slider-nav figure {
		padding: 0 5px;
	}
	.casart .design .slider-nav .slick-slide:hover::after,
	.casart .design .slider-nav .slick-current::after {
		left: 5px;
		width: calc(100% - 10px);
	}
	.casart .design .slider-nav .slick-arrow {
		top: 0;
		width: 25px;
		height: 25px;
	}
	.casart .design .slider-nav .slick-arrow.slick-prev {
		left: 10px;
	}
	.casart .design .slider-nav .slick-arrow.slick-next {
		right: 10px;
	}
	.casart .design .slider-nav .slick-dots li {
    display: inline-block;
		width: 12px;
    height: 12px;
		margin: 0 1vw;
	}
}*/


/* #lineup-common-area
==================================== */
#lineup-common-area .area-lineup .slick-slide[data-slick-index='0'] h4 {
	padding-top: 2px;
	padding-right: 10px;
}
#lineup-common-area .area-lineup .slick-slide[data-slick-index='0'] h4 img {
  height: auto;
	width: 100%;
}
/* mobile用 */
@media screen and (max-width:768px) {
	#lineup-common-area .area-lineup .slick-slide[data-slick-index='0'] h4 {
		padding-top: 0;
		padding-right: 0;
	}
	#lineup-common-area .area-lineup .slick-slide[data-slick-index='0'] h4 img {
		margin-bottom: 8px;
	}
}


/* .bs-model
==================================== */
/*.casart .bs-model {
	margin-top: 80px;
}
.casart .bs-model .w1366 {
	padding-bottom: 70px;
	background-color: #000;
	color: #fff;
	font-size: 15.5px;
}
.casart .bs-model > .c-normalw .flex-cont {
	padding-top: 20px;
}
.casart .bs-model > .c-normalw .flex-cont h5 {
	font-size: 22px;
	line-height: 1.7;
}
.casart .bs-model > .c-normalw .flex-cont h5 span {
	display: block;
	padding-bottom: 15px;
	margin-bottom: 10px;
	border-bottom: 1px solid #1a1a1a;
}
.casart .bs-model > .c-normalw .flex-cont p {
	margin-top: 20px;
}*/
/* mobile用 */
/*@media screen and (max-width:768px) {
	.casart .bs-model {
		margin-top: 40px;
	}
	.casart .bs-model .w1366 {
		padding-top: 20px;
		padding-bottom: 40px;
		font-size: 3.6vw;
	}
	.casart .bs-model .w1366 h4 {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.casart .bs-model .w1366 .flex-item {
		margin-top: 0;
		padding-top: 30px;
	}
	.casart .bs-model > .c-normalw .flex-cont h5 {
		font-size: 4.6vw;
	}
	.casart .bs-model > .c-normalw .flex-cont h5 span img {
		max-width: 100%;
		width: 25vw;
	}
	.casart .bs-model > .c-normalw .flex-cont p {
		margin-top: 15px;
	}
}*/

/* .sec-title
==================================== */


.sec-title{
	position: relative;
    padding: 90px 0 40px;
	margin: 100px 0 0;
}
.sec-title:before{
	position: absolute;
	content: "";
	top: 0;
	left: 50%;
	width: 1px;
	height: 60px;
	background-color: #666666;
}
.sec-title h3{
	font-size: 32px;
	text-align: center;
	    letter-spacing: .14em;
}


/* mobile用 */
@media screen and (max-width:768px) {
	.sec-title{
		padding: 14vw 0 6vw;
		margin: 14vw 0 0;
	}
	.sec-title:before{
		    height: 10vw;
	}
	.sec-title h3{
		    font-size: 6vw;
	}
	
}

/* .design
==================================== */

.features{
	padding: 0;
	margin: 140px 0 0;
	background-color: #eeebe9;
	overflow: hidden;
}
.features .features-cont{
	max-width: 1400px;
	margin: 50px auto 0;
	padding: 0 70px;
	display: grid;
    gap: 60px;
    grid-template-columns: repeat(3, minmax(252px, 1fr));
}
.features .features-cont p{
	font-size: 15px;
    letter-spacing: .16em;
    text-align: justify;
    line-height: 2.2;
    margin: 20px 0 0;
}
.features > figure{
	margin: 200px 0 0;
}

/* mobile用 */
@media screen and (max-width:768px) {
	.features{
		padding: 0;
		margin: 14vw 0 0;
	}
	
	.features .features-cont{
		max-width: none;
        display: block;
		padding: 0 12%;
        overflow: hidden;
		margin: 2vw auto 0;
	}
	.features .features-cont p{
		font-size: 3.6vw;
		letter-spacing: .16em;
		line-height: 1.8;
	}
	.features .features-cont div + div{
		margin: 12vw 0 0;
	}
	.features > figure{
		margin: 16vw 0 0;
	}
}




/* .plan
==================================== */
.concept {
	    margin: 0;
		overflow: hidden;
}
.concept > p{
	font-size: 16px;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.14em;
}
.concept > .flex-cont{
	margin: 80px auto 0 !important;
}
.concept .concept-item{
	width: 290px;
	text-align: center;
}
.concept .concept-item figure{
	height: 163px;
	text-align: center;
}
.concept .concept-item figure img{
	height: 100%;
}
.concept .concept-item h4{
	font-size: 23px;
	letter-spacing: .1em;
    margin: 40px 0 15px;
}
.concept .concept-item h4 span{
	font-size: 20px;
}
.concept .concept-item p{
	font-size: 16px;
	letter-spacing: .2em;
}
.concept .concept-item .btn-next{
	width: 190px;
	margin: 30px auto 0;
}
.concept .concept-item .btn-next a{
	text-align: left;
	padding: 4px 25px 6px 20px;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.concept {
		margin: 0;
        padding: 0 12%;
	}
	.concept p{
		font-size: 3.6vw;
        padding: 0;
        text-align: justify;
	}
	.concept > .flex-cont{
		padding: 0;
		margin: 6vw auto 0 !important;
	}
	.concept .concept-item{
		width: auto;
	}
	.concept .concept-item + .concept-item{
		margin: 12vw 0 0;
	}
	.concept .concept-item h4{
		font-size: 5.4vw;
		margin: 4vw 0 2vw;
	}
	.concept .concept-item p{
		text-align: center;
		font-size: 3.8vw;
	}
	.concept .concept-item .btn-next{
		width: 45vw;
	}
	.concept .concept-item .btn-next a{
		font-size: 3.6vw;
		padding: 2vw 4vw 1.5vw 5vw;
	}
}

/**case**/
.case-cont{
	margin: 200px 0 0;
}
.case-cont section{
	padding: 110px 0 150px;
	background-color: #eeebe9;
}
.case-cont section + section{
	margin: 10px 0 0;
}
.case-cont .case-cont-head{
	width: 790px;
	margin: 0 auto 68px;
	height: 210px;
}
.case-cont .case-cont-head figure,
.case-cont .case-cont-head div{
	width: 50%;
}
.case-cont .case-cont-head figure{
	border-right: 1px solid #999999;
}
.case-cont .case-cont-head div{
	padding: 0 0 0 60px;
	display: flex;
  flex-direction: column;
}
.case-cont .case-cont-head div h5{
	font-size: 62px;
	font-family:"futura-pt", "Jost", sans-serif;
	font-weight: 500;
}
.case-cont .case-cont-head div h5 span{
	display: block;
	font-size: 23px;
	letter-spacing: .12em;
	line-height: 1.3;
	font-family: YakuHanMP,'Noto Serif JP', "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif;
}
.case-cont .case-cont-head div ul{
	margin-top: auto;
}
.case-cont .case-cont-head div ul li{
	font-size: 14px;
    letter-spacing: .05em;
	line-height: 1.6;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.case-cont{
		margin: 20vw calc(50% - 50vw) 0;
        width: 100vw;
	}
	.case-cont .case-cont-head{
		width: auto;
		height: auto;
		margin: 0 auto 10vw;
	}
	.case-cont .case-cont-head figure,
	.case-cont .case-cont-head div{
		width: auto;
	}
	.case-cont .case-cont-head div{
		padding: 0 0 0 4vw;
	}
	.case-cont .case-cont-head figure{
		border: none;
	}
	.case-cont .case-cont-head div h5{
		font-size: 12vw;
	}
	.case-cont .case-cont-head div h5 span{
		font-size: 5.2vw;
	}
}
.case-cont section > figure{
	width: 1052px;
	margin: 0 auto;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.case-cont section > figure{
		width: auto;
	}
}
.case-cont .link-area{
	width: 900px;
	margin: 105px auto 0;
}
.case-cont .link-area > div{
	padding: 25px 30px 20px;
	display: flex;
	justify-content: space-between;
}
.case-cont .link-area > div + div{
	margin: 15px 0 0;
}
.case-cont .link-area > div > p,
.case-cont .link-area > div > div{
	width: 410px;
	color: #ffffff;
}
.case-cont .link-area > div > p{
	font-size: 16px;
	text-align: left;
    letter-spacing: .1em;
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.case-cont .link-area > div > div > p{
	font-size: 15px;
	text-align: left;
	letter-spacing: 0;
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.case-cont .link-area .btn-next a{
	text-align: center;
	padding: 8px 45px 10px 20px;
	margin: 0 0 8px;
}

.case-cont .link-area .link-plan{
	background-color: #8a826e;
}
.case-cont .link-area .btn-next > p > a{
	display: inline-block;
	color: #ffffff;
	padding: 0;
	border: none;
	background: none;
	font-family: inherit;
    text-decoration: underline;
	letter-spacing: 0;
	margin: 0;
}
.case-cont .link-area .link-exhibition{
	background-color: #826a60;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.case-cont section{
		padding: 10vw 10vw 12vw;
	}
	.case-cont .link-area{
		width: auto;
		margin: 14vw auto 0;
	}
	.case-cont .link-area > div{
		display: block;
		padding: 3vw 4vw;
	}
	.case-cont .link-area > div > p,
	.case-cont .link-area > div > div{
		width: auto;
	}
	.case-cont .link-area > div > p{
		font-size: 3.4vw;
	}
	.case-cont .link-area > div > div > p{
		font-size: 3.4vw;
	}
	.case-cont .link-area .btn-next{
		margin: 4vw 0 0;
	}
	.case-cont .link-area .btn-next a{
		padding: 2vw 12vw 2vw 1vw;
		font-size: 3.6vw;
	}
}


/**kiratech-cont**/
.kiratech-cont{
	padding: 200px 0 180px;
}
.kiratech-cont h5{
	font-size: 23px;
	text-align: center;
	letter-spacing: .14em;
	border: 2px solid #898989;
    padding: 20px 0;
    margin: 0 0 90px;
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.kiratech-cont .dot-text{
	margin: 0 0 15px;
	text-indent: -1em;
    padding: 0 0 0 1em;
	font-size: 14px;
	font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.kiratech-cont .kiratech-cont-inner{
	margin: 0 auto 110px;
	width: 880px;
}
.kiratech-cont .kiratech-cont-inner hr{
	display: block;
	margin: 90px auto 110px;
    width: 280px;
}
/* mobile用 */
@media screen and (max-width:768px) {
	.kiratech-cont{
		padding: 14vw 0 10vw;
		margin: 0 calc(50% - 50vw) 0;
        width: 100vw;
	}
	.kiratech-cont h5{
		font-size: 5.2vw;
		margin: 0 0 10vw;
		padding: 4vw 0;
		line-height: 1.4;
	}
	.kiratech-cont .dot-text{
		font-size: 3.6vw;
	}
	.kiratech-cont .kiratech-cont-inner{
		margin: 0 0 12vw;
		width: auto;
	}
	.kiratech-cont .kiratech-cont-inner hr{
		margin: 12vw auto 14vw;
		width: 25vw;
	}
}
	



.btn-next{
    /*max-width: 23em;*/
	letter-spacing: .12em;
}

.btn-next a{
	display: block;
	text-decoration: none;
	background-color: #ffffff;
	color: #333333;
	font-size: 16px;
	border: 1px solid #333333;
	    padding: 8px 25px 10px 20px;
	position: relative;
	transition: .3s;
}
.btn-next a:hover{
	opacity: .6;
	transition: .3s;
}
.btn-next a span{
	position: absolute;
    display: inline-block;
    width: 27px;
    height: 2px;
    top: 50%;
    right: 2%;
    transform: translate(-50%, 100%);
    border-radius: 9999px;
    background-color: #333333;
    transition: .3s;
}
.btn-next a:hover span{
    right: 0%;
	transition: .3s;
}
.btn-next a span:before{
	    content: "";
    position: absolute;
    top: calc(50% - 1.5px);
    right: 0;
    width: 14px;
    height: 2px;
    border-radius: 9999px;
    background-color: #333333;
    transform: rotate(45deg);
    transform-origin: calc(100% - 1.5px) 50%;
}
/* mobile用 */
@media screen and (max-width:768px) {

	.btn-next{
		    margin: 6vw auto 4vw;
	}
	.btn-next + .btn-next{
		margin: 4vw 0 0;
	}
	.btn-next a{
	    font-size: 4.6vw;
	    padding: 2vw 4vw 2.5vw 4vw;
	}
}






/* animation
============================================================ */
@media screen{
	/* 画面外にいる状態
  ---------------------------------------- */
	.fadeinN,
	.fadeinNauto {
		opacity: 0;
		transform: translate(0, 0);
		transition: all 1500ms;
	}
	.fadeinL,
	.fadeinLauto {
		opacity: 0;
		transform: translate(-300px, 0);
		transition: all 900ms;
	}
	.fadeinR,
	.fadeinRauto {
		opacity: 0;
		transform: translate(300px, 0);
		transition: all 900ms;
	}
	.fadeinB,
	.fadeinBauto {
		opacity: 0;
		transform: translate(0, 100px);
		transition: all 900ms;
	}
	.fadeinT,
	.fadeinTauto {
		opacity: 0;
		transform: translate(0, -100px);
		transition: all 900ms;
	}
	.delay01{
		transition-delay:.3s;
	}
	.delay02{
		transition-delay:.5s;
	}
	.delay03{
		transition-delay:.8s;
	}
	.delay04{
		transition-delay:.9s;
	}
	.delay05{
		transition-delay:1.5s;
	}
	/* 画面内に入った状態
  ---------------------------------------- */
	.fadeinN.scrollin,
	.fadeinL.scrollin,
	.fadeinR.scrollin, 
	.fadeinB.scrollin,
	.fadeinT.scrollin,
	.fadeinNauto.scrollin,
	.fadeinLauto.scrollin,
	.fadeinRauto.scrollin, 
	.fadeinBauto.scrollin,
	.fadeinTauto.scrollin {
		opacity: 1;
		transform: translate(0, 0);
	}
	@media screen and (max-width:768px) {
        .fadeinT,
        .fadeinTauto {
            opacity: 0;
            transform: translate(0, 0px);
        }      
		.fadeinT.scrollin,
		.fadeinTauto.scrollin {
			opacity: 1;
			transform: translate(0, 0);
		}
		.delay03{
			transition-delay:0s;
		}
		.delay04{
			transition-delay:0s;
		}
		.delay05{
			transition-delay:0s;
		}
	}
}