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

/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/

html{ font-size: 62.5%; }

body {
	width: 100%;
	height: 100%;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	color:#4d4d4d;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 400;
	font-feature-settings: "palt";
	/*text-align: justify;*/
	background:#FFF;
	line-height:1.6;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

img{
	width: 100%;
	height: auto;
}
img { -ms-interpolation-mode: bicubic; }

.object-fit-img {
  object-fit: cover;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;'
}

a{
	text-decoration: none;
	outline: none;
	transition-duration: 0.5s;
	transition-property: opacity, color;
}

a:hover{
	text-decoration: none;
	opacity: 0.7;
}

strong {
	font-weight: 700;
}



/*----DWナビゲート用----*/
.pc{}
.sp{}
.img-switch{}


header {
	width: 100%;
}

main,article{
	width: 100%;
}

footer{
    width: 100%;
	background: rgb(253,208,0);
	background: linear-gradient(45deg, rgba(253,208,0,1) 0%, rgba(230,129,34,1) 100%);
	color: #FFF;
	position: relative;
}

/*ページトップ*/
.SmoothScroll_pageTop{
    text-align:right;
    position: absolute;
    top: -50px;
    right: 4%;
	z-index: 5;
	line-height: 1;
}
.SmoothScroll_pageTop a{
	display:inline-block;
    width:22px;
}

body.nav_open {
	overflow: hidden;
}


/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 641px){
	
	.sp{
		display: none!important;
	}
	
	body {
		padding-top: 98px;
	}
	
	.hamburger {
        position: absolute;
        right : 0;
        top   : 20px;
    }
	
	header, footer, article {
		min-width: 1300px;
		margin-left: auto;
		margin-right: auto;
	}
	
	header {
		height: 98px;
		background: #FFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	
	header {
		height: 98px;
		background: #FFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	
	header div.h_block {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
	header div.h_block h1{
		width: 312px;
		line-height: 0;
		margin-right: 144px;
	}
	
	header div.h_block nav.globalMenuSp{
		width: 488px;
		margin-right: 40px;
	}
	
	header div.h_block nav.globalMenuSp ul.outside{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li{
		display: inline-block;
		font-size: 14px;
		font-size: 1.4rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1.4;
		position: relative;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li ul.lower{
		width: 130%;
		list-style: none;
		position: absolute;
		left: -12px;
		top: -9999px;
		background: #FFF;
		z-index: 10;
		padding-top: 5px;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li:hover ul.lower{
		top: 45px;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li ul.lower li{
		display: block;
		padding: 12px;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li ul.lower li + li{
		border-top: 1px solid #ccc;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li a{
		color: #4d4d4d;
		display: block;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li a span.en{
		width: 56px;
		display: block;
		margin-top: 6px;
	}
	
	header div.h_block nav.globalMenuSp ul.lower li a span.en{
		width: 82px;
		display: block;
		margin-top: 2px;
	}
	
	header div.h_block a.insta{
		width: 32px;
		line-height: 0;
		margin-right: 40px;
	}
	
	header div.h_block a.entry{
		width: 142px;
		line-height: 0;
		background: rgb(253,208,0);
		background: linear-gradient(45deg, rgba(253,208,0,1) 0%, rgba(230,129,34,1) 100%);
		display: block;
		padding: 18px 0 15px;
		text-align: center;
		border-radius: 6px;
		overflow: hidden;
	}
	
	header div.h_block a.entry img{
		width: 48px;
	}
	
	header div.h_block div.hamburger_block,
	body #modal {
		display: none;
	}
	
	article {
		overflow: hidden;
	}
	
	section{
		width: 1140px;
		margin: 0 auto;
	}
	
	section#feature div.section_inner h2{
		width: -webkit-calc(100vw - 416px);
        width: -moz-calc(100vw - 416px);
        width: calc(100vw - 416px);
		min-width: 416px;
		line-height: 0;
		position: absolute;
		top: -46px;
		left: 894px;
		background: #3e3a39;
		padding: 18px 18px;
		z-index: 5;
	}
	
	div.slider_nav {
		position: relative;
	}
	
	div.slider_nav a {
		display: block;
		overflow: hidden;
		border-radius: 12px;
		margin: 0 3px;
	}
	
	div.slider_nav .slick-prev, div.slider_nav .slick-next {
        font-size: 0;
        line-height: 0;
        position: absolute;
		top: auto;
        bottom: -50px;
        display: block;
        width: 30px;
        height: 24px;
        padding: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer;
        color: transparent;
        border: none;
        outline: none;
        background: none;
        z-index: 5;
    }
	
	div.slider_nav .slick-prev {
		left: auto;
		right: 180px;
	}
	
	div.slider_nav .slick-next  {
		right: 80px;
	}
	
	div.slider_nav .slick-prev::before,
	div.slider_nav .slick-next::before {
		content: "";
		width: 30px;
        height: 24px;
		display: inline-block;
		opacity: 1;
	}
	
	div.slider_nav .slick-prev::before {
		background: url("../images/common/people_slider_arrow_l.svg") no-repeat;
		background-size: contain;
	}
	
	div.slider_nav .slick-next::before {
		display: inline-block;
		background: url("../images/common/people_slider_arrow_r.svg") no-repeat;
		background-size: contain;
	}
	
	div.slider_nav .slick-prev:hover::before,
	div.slider_nav .slick-next:hover::before {
		opacity: 0.7;
	}
	
	div#rec_banner {
		width: 1300px;
		margin: 40px auto 0;
	}
	
	div#rec_banner a{
		width: 1140px;
		display: block;
		position: relative;
		background: url("../images/common/banner_rec_back_pc.jpg") no-repeat;
		background-size: cover;
		color: #FFF;
		padding: 25px 0 30px;
		line-height: 0;
		text-align: center;
		border-radius: 12px;
		margin: 0 auto;
	}
	
	div#rec_banner a h2{
		width: 215px;
		margin: 0 auto;
		line-height: 1;
		font-size: 20px;
		font-size: 2.0rem;
		font-weight: 500;
		letter-spacing: 0.2em;
	}
	
	div#rec_banner a h2 span{
		width: 100%;
		display: block;
		padding-bottom: 12px;
		margin-bottom: 12px;
		position: relative;
	}
	
	div#rec_banner a h2 span::after{
		content: "";
		width: 50px;
		height: 1px;
		border-bottom: 2px solid #FFF;
		position: absolute;
		bottom: 0;
		left: -webkit-calc(50% - 25px);
		left: -moz-calc(50% - 25px);
		left: calc(50% - 25px);
	}
	
	div#rec_banner a p{
		width: 150px;
		position: absolute;
		right: 60px;
		bottom: 24px;
	}
	
	div#rec_banner a span.illust01 {
		width: 84px;
		position: absolute;
		top: 26px;
		left: 346px;
		z-index: 3;
	}
	
	div#rec_banner a span.illust02 {
		width: 27px;
		position: absolute;
		bottom: 34px;
		right: 400px;
		z-index: 3;
	}
	
	div#rec_banner a::before{
		content: "";
		width: 58px;
		height: 58px;
		background: url("../images/common/banner_cut_t.svg") no-repeat;
		background-size: contain;
		position: absolute;
		top: -5px;
		left: -5px;
		z-index: 5;
	}
	
	div#rec_banner a::after{
		content: "";
		width: 58px;
		height: 58px;
		background: url("../images/common/banner_cut_b.svg") no-repeat;
		background-size: contain;
		position: absolute;
		bottom: -5px;
		right: -5px;
		z-index: 5;
	}
	
	footer {
		margin-top: 75px;
		padding: 35px 0;
	}
	
	footer div.block{
        width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
    }
	
	footer div.block a.privacy{
        display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-size: 1.2rem;
		color: #FFF;
		line-height: 1;
    }
	
	footer div.block a.privacy::before{
        content: "";
		width: 12px;
		height: 12px;
		background: url("../images/common/f_btn_icon.svg") no-repeat;
		background-size: contain;
		margin-right: 1em;
		display: inline-block;
    }
	
    footer small{
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1;
    }
}

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 640px){
	
	.pc{
		display: none!important;
	}
	
	body {
		position: relative;
		padding-top: 60px;
	}
	
	a:hover{
		text-decoration: none;
		opacity: 1;
	}
	
	header {
		height: 60px;
		background: #FFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	
	header div.h_block {
		width: 96%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
	header div.h_block h1{
		width: 50vw;
		max-width: 250px;
		line-height: 0;
		margin-right: 15.6vw;
	}
	
	header div.h_block a.insta{
		width: 6.5vw;
		max-width: 32px;
		line-height: 0;
	}
	
	header div.h_block a.entry{
		width: 19.6vw;
		max-width: 98px;
		line-height: 0;
		background: rgb(253,208,0);
		background: linear-gradient(45deg, rgba(253,208,0,1) 0%, rgba(230,129,34,1) 100%);
		display: block;
		padding: 2vw 0 1.6vw;
		text-align: center;
		border-radius: 6px;
		overflow: hidden;
	}
	
	header div.h_block a.entry img{
		width: 8.64vw;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li ul.lower{
		width: 100%;
		list-style: none;
		padding-top: 5px;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li ul.lower li{
		display: block;
		padding: 5px 0 5px 15px;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li ul.lower li:last-child{
		padding-bottom: 0;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li a{
		color: #4d4d4d;
		display: block;
	}
	
	header div.h_block nav.globalMenuSp ul.outside li a span.en{
		width: 56px;
		display: block;
		margin-top: 6px;
	}
	
	header div.h_block nav.globalMenuSp ul.lower li a span.en{
		width: 82px;
		display: block;
		margin-top: 6px;
	}
	
	article {
		overflow: hidden;
	}
	
	section {
		width: 92%;
		margin: 0 auto;
	}
	
	div.slider_nav {
		position: relative;
	}
	
	div.slider_nav a {
		display: block;
		overflow: hidden;
		border-radius: 12px;
		margin: 0 3px;
	}
	
	div.slider_nav .slick-prev, div.slider_nav .slick-next {
        font-size: 0;
        line-height: 0;
        position: absolute;
		top: auto;
        bottom: -50px;
        display: block;
        width: 30px;
        height: 24px;
        padding: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer;
        color: transparent;
        border: none;
        outline: none;
        background: none;
        z-index: 5;
    }
	
	div.slider_nav .slick-prev {
		left: -webkit-calc(50% - 50px);
		left: -moz-calc(500% - 50px);
		left: calc(50% - 50px);
		
	}
	
	div.slider_nav .slick-next  {
		right: -webkit-calc(50% - 50px);
		right: -moz-calc(500% - 50px);
		right: calc(50% - 50px);
	}
	
	div.slider_nav .slick-prev::before,
	div.slider_nav .slick-next::before {
		content: "";
		width: 30px;
        height: 24px;
		display: inline-block;
		opacity: 1;
	}
	
	div.slider_nav .slick-prev::before {
		background: url("../images/common/people_slider_arrow_l.svg") no-repeat;
		background-size: contain;
	}
	
	div.slider_nav .slick-next::before {
		display: inline-block;
		background: url("../images/common/people_slider_arrow_r.svg") no-repeat;
		background-size: contain;
	}
	
	div#rec_banner {
		width: 92%;
		margin: 10vw auto 0;
	}
	
	div#rec_banner a{
		width: 100%;
		display: block;
		position: relative;
		background: url("../images/common/banner_rec_back_sp.jpg") no-repeat;
		background-size: cover;
		color: #FFF;
		padding: 4.9vw 0 5.3vw;
		line-height: 0;
		text-align: center;
		border-radius: 12px;
	}
	
	div#rec_banner a h2{
		width: 25.8vw;
		margin: 0 auto;
		line-height: 1;
		font-size: 24px;
		font-size: clamp(14px, 2.8vw, 24px);
		font-weight: 500;
		letter-spacing: 0.2em;
	}
	
	div#rec_banner a h2 span{
		width: 100%;
		display: block;
		padding-bottom: 12px;
		margin-bottom: 12px;
		position: relative;
	}
	
	div#rec_banner a h2 span::after{
		content: "";
		width: 30px;
		height: 1px;
		border-bottom: 2px solid #FFF;
		position: absolute;
		bottom: 0;
		left: -webkit-calc(50% - 15px);
		left: -moz-calc(50% - 15px);
		left: calc(50% - 15px);
	}
	
	div#rec_banner a p{
		width: 4.2vw;
		position: absolute;
		right: 13vw;
		bottom: 5.7vw;
	}
	
	div#rec_banner a span.illust01 {
		width: 11.5vw;
		position: absolute;
		top: 3.4vw;
		left: 15.7vw;
		z-index: 3;
	}
	
	div#rec_banner a span.illust02 {
		width: 3.8vw;
		position: absolute;
		bottom: 5.4vw;
		right: 20.8vw;
		z-index: 3;
	}
	
	div#rec_banner a::before{
		content: "";
		width: 7vw;
		height: 7vw;
		background: url("../images/common/banner_cut_t.svg") no-repeat;
		background-size: contain;
		position: absolute;
		top: -0.82vw;
		left: -0.82vw;
		z-index: 5;
	}
	
	div#rec_banner a::after{
		content: "";
		width: 7vw;
		height: 7vw;
		background: url("../images/common/banner_cut_b.svg") no-repeat;
		background-size: contain;
		position: absolute;
		bottom: -0.82vw;
		right: -0.82vw;
		z-index: 5;
	}
	
	footer {
		margin-top: 14vw;
		padding: 5.2vw 0 4vw;
	}
	
	footer div.block{
        width: 92%;
		margin: 0 auto;
		text-align: center;
    }
	
	footer div.block a.privacy{
        display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		font-size: clamp(12px, 2.8vw, 24px);
		color: #FFF;
		line-height: 1;
    }
	
	footer div.block a.privacy::before{
        content: "";
		width: 3vw;
		height: 3vw;
		background: url("../images/common/f_btn_icon.svg") no-repeat;
		background-size: contain;
		margin-right: 1em;
		display: inline-block;
    }
	
    footer small{
		font-size: 20px;
		font-size: clamp(10px, 2.33vw, 20px);
		line-height: 1;
        display: block;
		margin-top: 3.6vw;
    }
	
	footer .SmoothScroll_pageTop{
        text-align:right;
        position: absolute;
        top: -40px;
        right: 4%;
        z-index: 5;
        line-height: 1;
    }
	
	/*　ハンバーガーボタン　*/
    .hamburger {
      display : block;
      position: absolute;
      z-index : 9999;
      width : 32px;
      height: 24px;
      text-align: center;
      top: 30%;
      right: 34.2%;
      cursor: pointer;
    }
    .hamburger span {
      display : block;
      position: absolute;
      width   : 32px;
      height  : 2px ;
      left    : 0;
      background : #595758;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition   : 0.3s ease-in-out;
      transition        : 0.3s ease-in-out;
    }
	/*.hamburger.active {
      right: 15px;
    }*/
	
	.hamburger span:nth-of-type(1) {
        top: 0;
    }
    .hamburger span:nth-of-type(2) {
        top: 47.5%;
    }
    .hamburger span:nth-of-type(3) {
        bottom: 0;
    }

    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
      top : 12px;
      left: 0;
      -webkit-transform: rotate(-45deg);
      -moz-transform   : rotate(-45deg);
      transform        : rotate(-45deg);
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
      top: 12px;
      -webkit-transform: rotate(45deg);
      -moz-transform   : rotate(45deg);
      transform        : rotate(45deg);
    }

    body #modal {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -888;
        background: rgba(0,0,0,0.8);
        opacity: 0;
        transition-duration: 0.5s;
        transition-property: opacity, color;
        visibility: hidden; 
    }

    body.nav_open #modal {
        z-index: 888;
        opacity: 1;
        visibility: visible;

    }
	
	nav.globalMenuSp {
        width: 50%;
        max-width: 300px;
        height: 100%;
        position: fixed;
        z-index : 998;
        top  : 0;
        right : 0;
        color: #333;
        background: #fefcf2;
        text-align: left;
        transform: translateX(100%);
        transition: all 0.6s;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
	
	nav.globalMenuSp ul.outside {
		padding: 60px 20px 40px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
    }
	
	nav.globalMenuSp ul.outside li {
      list-style-type: none;
        width: 100%;
        text-align: left;
        padding: 10px 0 15px;
        line-height: 1.4;
    }

    nav.globalMenuSp ul.outside li a {
      color: #4d4d4d;
      text-decoration :none;
      letter-spacing: 0.06em;
      line-height: 1.3;
    }
	
	nav.globalMenuSp ul.outside li a span.en{
		width: 56px;
		display: block;
		margin-top: 6px;
	}

    nav.globalMenuSp ul.outside li ul li{
      padding: 5px 0;
    }
	
	nav.globalMenuSp ul.outside li ul li{
      padding: 5px 0;
    }
	
	

    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
      transform: translateX(0%);
    }
}