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

/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/
html {
  font-size: 62.5%;
  visibility: hidden;
}
html.wf-active *{
  visibility: visible;
}

body {
	width: 100%;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color:#000;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 400;
	font-feature-settings: "palt";
	text-align: justify;
	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;
	background: url("images/common/bg.jpg") repeat;
	background-size: 250px 2104px;
}


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

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

a{
	text-decoration: none;
	outline: none;
}

a:hover{
	text-decoration: none;
}

header,main,footer {
	width: 100%;
}

footer a{
	color: #3e3a39;
}

main{
	contain: paint;
}

body.modal-open {
	overflow: hidden;
}

object,
#animation_container{width: 100%;}

object {
height: 100%;
position: absolute;
top: 0;
left: 0;
}


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

@media print, screen and (min-width: 961px){
	.sp{
		display: none!important;
	}
	
	a.tel[href^="tel:"] {
       pointer-events: none;
       text-decoration: none;
    }
	
	a.opacity {
		transition-duration: 0.5s;
		transition-property: opacity, color;
	}
	
	a.opacity:hover {
		opacity: 0.7;
	}
	
	a.line {
		display: inline-block;
		position: relative;
	}
	
	a.line::after {
		content: "";
		width: 0;
		height: 1px;
		background: #808080;
		display: inline-block;
		position: absolute;
		bottom: -0.5em;
		left: 0;
		transition: width .5s ease;
	}
	
	a.line:hover::after {
		width: calc(100% + 1em);
	}
	
	a span.hover_slide:after {
		transition: margin-left .35s ease;
	}
	
	a:hover span.hover_slide:after {
		margin-left: 1em!important;
	}
	
	a.out_arrow::after {
		transition: right .35s ease;
	}
	
	a.out_arrow:hover::after {
		right: -8%!important;
	}
	
	div#mv_block {
		width: 100%;
		position: relative;
		line-height: 0;
		margin-top: 3.2vw;
        margin-top: 3.2cqw;
		padding-top: 2.77vw;
        padding-top: 2.77cqw;
	}
	
	div#mv_block header{
		width: 100%;
		/*margin-top: 48px;*/
		position: fixed;
		top: 3.2vw;
		top: 3.2cqw;
		z-index: 99;
	}
	
	div#mv_block header #h_block{
		width: 92.66%;
		margin: 0 auto;
	}
	
	div#mv_block header #h_block h1{
		width: 12.8%;
		max-width: 178px;
		line-height: 0;
	}
	
	div#mv_block nav.slide_nav {
		width: 54%;
        position: fixed;
		/*top: 17px;*/
		top: 4.33vw;
		top: 4.33cqw;
		right: 4.2%;
		z-index: 99;
    }
	
	div#mv_block nav.slide_nav ul.nav_menu{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 1.6rem;
		font-size: clamp(1.02rem, 1.066vw, 1.6rem);
		font-weight: 700;
    }
	
	div#mv_block nav.slide_nav ul.nav_menu li.menu{
		display: inline-block;
    }
	
	div#mv_block nav.slide_nav ul.nav_menu li.menu a {
		transition-duration: 0.5s;
		transition-property: opacity;
	}
	
	div#mv_block nav.slide_nav ul.nav_menu li.menu a:hover {
		opacity: 0.5;
	}
	
	div#mv_block nav.slide_nav ul.nav_menu li.menu small{
		display: none;
    }
	
	div#mv_block nav.slide_nav a{
		color: #000;
    }
	
	div#mv_block nav.slide_nav li.sns_block {
		display: none;
	}
	
	div#mv_block #page_title {
		margin: 1.33vw 1.33vw 0 1.33vw;
		margin: 1.33cqw 1.33cqw 0 1.33cqw;
		border-radius: 20px;
		overflow: hidden;
		position: relative;
		z-index: 0;
	}
	
	div#mv_block #page_title h2{
		font-family: "Lato", "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 1.5rem;
		font-size: clamp(calc((1.5rem * 0.64)), 1vw, 1.5rem);
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0.38em;
		color: #FFF;
		transform: rotate(90deg) scaleY(0.8);
		position: absolute;
		top: 50%;
		right: -1em;
		z-index: 5;
	}
	
	div.nav_open_btn,
	body nav.slide_nav a.logo{
		display: none;
	}
	
	div.text_anime {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	
	main {
		margin-top: 5.6vw;
		padding-bottom: 9.2vw;
	}
	
	main section div.section_inner h2{
		font-size: 3.2rem;
		font-size: clamp(calc((3.2rem * 0.64)), 2.13vw, 3.2rem);
		letter-spacing: 0.2em;
		text-align: center;
	}
	
	footer {
        border-top: 3px solid #898989;
		padding: 5.6vw 0;
    }
	
	footer div.f_block {
		width: 70%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	footer div.f_block h2{
		width: 28.6%;
		line-height: 0;
	}
	
	footer div.f_block div.block{
		width: 37.8%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	footer div.f_block div.block nav{
		width: 50%;
	}
	
	footer div.f_block div.block ul li{
		display: block;
		font-size: 1.6rem;
		font-size: clamp(1.02rem, 1.066vw, 1.6rem);
		font-weight: 700;
		line-height: 1;
	}
	
	footer div.f_block div.block ul li + li{
		margin-top: 1.5em;
	}
	
	footer div.f_block div.block div.box{
		width: 45.2%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		position: relative;
	}
	
	footer div.f_block div.block div.box div.logo{
		font-size: 1.6rem;
		font-size: clamp(1.02rem, 1.066vw, 1.6rem);
		font-weight: 700;
		line-height: 1;
		position: absolute;
		top: -0.4em;
		left: 0;
		z-index: 5;
	}
	
	footer div.f_block div.block div.box div.logo a{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	footer div.f_block div.block div.box div.logo a::after{
		content: "";
		width: 2em;
		height: 1.75em;
		display: inline-block;
		background: url("images/common/f_icon_blank.svg") no-repeat;
		margin-left: 0.5em;
	}
	
	footer div.f_block div.block ul.sns_block {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	footer div.f_block div.block ul.sns_block li{
		width: 25.8%;
		margin: 0 2.5%;
	}
}


@media screen and (min-width:961px) and (max-width: 1500px){
	
}
	

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

@media screen and (max-width: 960px){
	/*360-960px（750pxレイアウト remはレイアウト上のフォントサイズ）
	960/750=1.28
	360/750=0.48
	(2.5rem*1.28)/960=3.33vw
	font-size: calc(2.5rem * 0.48);
	font-size: clamp(calc((2.5rem * 0.48)), 3.33vw, calc(2.5rem * 1.28));
	*/
	
	.pc{
		display: none!important;
	}
	
	a:hover{
		text-decoration: none;
		opacity: 1;
	}
	
   a.tel[href^="tel:"] {
       pointer-events: auto;
       text-decoration: none;
    }
	
	body {
		padding-top: 2.4vw;
	}
	
	div#mv_block {
		width: 100%;
		position: relative;
		line-height: 0;
	}
	
	div.nav_open_btn {
        width: 13.6vw;
        aspect-ratio: 1 / 1;
        position: fixed;
        top: 3vw;
        right: 4.6vw;
        z-index: 9999;
        cursor: pointer;
        background: url("images/common/nav_open.svg") no-repeat center center;
        background-size: contain;
      }
	
	div#mv_block header{
		width: 100%;
		margin-top: 3.6vw;
		/*position: absolute;
		top: 3.6vw;
		left: 0;
		z-index: 5;*/
	}
	
	div#mv_block header #h_block{
		width: 84%;
		margin: 0 auto;
	}
	
	div#mv_block header #h_block h1{
		width: 36.4%;
		line-height: 0;
	}
	
	div#mv_block #page_title {
		margin: 3vw 2.4vw 0 2.4vw;
		border-radius: 2vw;
		overflow: hidden;
		position: relative;
		z-index: 0;
	}
	
	div#mv_block #page_title h2{
		font-family: "Lato", "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: calc(1.8rem * 0.48);
		font-size: clamp(calc((1.8rem * 0.48)), 2.4vw, calc(1.8rem * 1.28));
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0.38em;
		color: #FFF;
		transform: rotate(90deg) scaleY(0.8);
		position: absolute;
		top: 50%;
		right: -1em;
		z-index: 5;
	}
	
	div.text_anime {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	
	main {
		margin-top: 14vw;
		padding-bottom: 18vw;
	}
	
	main section div.section_inner h2{
		font-size: calc(3.6rem * 0.48);
		font-size: clamp(calc((3.6rem * 0.48)), 4.8vw, calc(3.6rem * 1.28));
		letter-spacing: 0.2em;
		text-align: center;
	}
		
	
	footer {
        border-top: 3px solid #898989;
		padding: 15vw 0 12vw;
    }
	
	footer div.f_block {
		width: 50%;
		margin: 0 auto;
	}
	
	footer div.f_block h2{
		width: 100%;
		line-height: 0;
	}
	
	footer div.f_block div.block{
		margin-top: 6.6vw;
	}
	
	footer div.f_block div.block nav{
		display: none;
	}
	
	footer div.f_block div.block div.box {
		display: block;
		line-height: 1;
	}
	
	footer div.f_block div.block div.box div.logo{
		font-size: calc(2.5rem * 0.48);
		font-size: clamp(calc((2.5rem * 0.48)), 3.33vw, calc(2.5rem * 1.28));
		font-weight: 700;
		line-height: 1;
		text-align: center;
		margin-top: 1.25em;
	}
	
	footer div.f_block div.block div.box div.logo span{
		display: inline-block;
	}
	
	footer div.f_block div.block div.box div.logo a{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	footer div.f_block div.block div.box div.logo a::after{
		content: "";
		width: 2em;
		height: 1.75em;
		display: inline-block;
		background: url("images/common/f_icon_blank.svg") no-repeat;
		margin-left: 0.5em;
	}
	
	footer div.f_block div.block ul.sns_block {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	footer div.f_block div.block ul.sns_block li{
		width: 18.3%;
		margin: 0 1.8%;
	}
	


    /*ハンバーガーナビ*/
    body #modal {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -888;
        background: rgba(0,0,0,0.7);
        opacity: 0;
        transition-duration: 0.5s;
        transition-property: opacity, color;
        visibility: hidden; 
    }

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

    body.nav_open {
        overflow: hidden;
    }
	
	body nav.slide_nav {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index : 9999;
        top: 0;
        right: 0;
        transform: translateX(110%);
        transition-property: transform;
        transition-duration: 0.6s;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #4fc4d7;
		padding: 25vw 0 10vw;
    }
	
	body nav.slide_nav a{
        color: #FFF;
    }
	
	body nav.slide_nav div.close_btn {
		width:  6.92vw;
		height: 6.92vw;
		position: absolute;
		top: 6vw;
		right: 8.66vw;
		z-index: 99;
		cursor: pointer;
	}

    body nav.slide_nav div.close_btn::before{
        content: "";
        width: 124%;
        height: 2px;
        display: block;
        position: absolute;
        top: calc(50% - 1px);
        left: -8%;
        background: #FFF;
        transform-origin : 50%;
        transform: rotate(-45deg);
    }

    body nav.slide_nav div.close_btn::after{
        content: "";
        width: 124%;
        height: 2px;
        display: block;
        position: absolute;
        top: calc(50% - 1px);
        left: -8%;
		background: #FFF;
        transform: rotate(45deg);
    }
	
	body nav.slide_nav a.logo {
		width:  30vw;
		position: absolute;
		top: 6vw;
		left: 7.6vw;
		z-index: 99;
		cursor: pointer;
	}
	
	body nav.slide_nav ul.nav_menu {
        width: 74%;
		margin: 0 auto;
    }

	body nav.slide_nav ul.nav_menu li.menu {
		font-size: 1.44rem;
		font-size: clamp(1.44rem, 4vw, 3.84rem);
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.4;
		padding-bottom: 3.7vw;
		padding-left: 3vw;
    }
	
	body nav.slide_nav ul.nav_menu li.menu + li.menu {
		padding-top: 3.7vw;
		border-top: 2px solid #FFF;
	}
	
	body nav.slide_nav ul.nav_menu li.menu a {
		display: block;
		position: relative;
    }
	
	body nav.slide_nav ul.nav_menu li.menu a::after {
		content: "";
		width: 13.6vw;
		height: 4.66vw;
		display: block;
		background: url("images/common/nav_arrow_more.svg") no-repeat;
		background-size: contain;
		position: absolute;
		top: 2vw;
		right: 0;
		z-index: 2;
    }
	
	body nav.slide_nav ul.nav_menu li.menu a small{
		display: block;
		font-family: "Lato", "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 1.1em;
		font-size: clamp(1.1rem, 3.06vw, 2.94rem);
		font-weight: 400;
		letter-spacing: 0.38em;
		transform: scaleY(0.8);
		margin-left: 0.25em;
    }
	
	body nav.slide_nav ul.nav_menu li.sns_block {
		margin-top: 7.2vw;
	}
	
	body nav.slide_nav ul.nav_menu li.sns_block ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	body nav.slide_nav ul.nav_menu li.sns_block ul li{
		width: 15%;
		margin: 0 1.4%;
	}
	
	body nav.slide_nav ul.nav_menu li.sns_block ul li.logo{
		width: 100%;
		margin: 3.4vw 0;
	}
	
	body nav.slide_nav ul.nav_menu li.sns_block ul li.logo a{
		width: 58%;
		display: block;
		margin: 0 auto;
	}

    body nav.slide_nav ul li a div{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }

    body nav.slide_nav ul li a div span{
        display: inline-block;
        border: 1px solid #1993FF;
        border-radius: 12px;
        letter-spacing: 0.1em;
        text-align: center;
        margin-right: 0.5em;
    }

    nav.slide_nav.active {
        transform: translateY(0%);
    }
	
	
}