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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
html{font-size:16px;}
body {-webkit-text-size-adjust: 100%;}
#wrap{margin: 0 auto;overflow: hidden;}


/* =============================================
　　font
============================================= */
#intro h2,#contents1 h2,#contents2 h2,#top_cms h2,#top_info h2,#f_contact .con_bt,.more_bt a,#top_info .more_bt2 a{
	font-family: 'Roboto', "Noto Sans JP", YuGothic,"Yu Gothic","游ゴシック体","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#main_img .txt,#page_title,#f_contact .con_txt {
	font-family: "Noto Sans JP", YuGothic,"Yu Gothic","游ゴシック体","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","Helvetica Neue",Helvetica,Arial,sans-serif!important;
}
.cate_list .more_bt a{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}


/* =============================================
　　loader
============================================= */
#loader{
	top: 0;
	left: 0;
	z-index: 9999;
	transition: -webkit-transform 1s cubic-bezier(0.5, 0, 0, 1);
    transition: transform 1s cubic-bezier(0.5, 0, 0, 1);
    transition: transform 1s cubic-bezier(0.5, 0, 0, 1), -webkit-transform 1s cubic-bezier(0.5, 0, 0, 1);
}
#loader.load_bg {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.load_logo figure{
	opacity: 0;
	-webkit-transform: translateX(40px);
    transform: translateX(40px);
	transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    transition-duration: 1.0s;
    transition-delay: 0.5s;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.7, 1);
	max-width: 300px;
	z-index: 2;
}
#loader.load .load_logo figure{
	-webkit-transform: translateX(0px); 
    transform: translateX(0px);
    opacity: 1.0;
}
#loading_line,#loading_bg{
	top: calc(100vh - 100px);
	left: 0;
	margin: auto;
	height: 2px;
	-webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    transition: -webkit-transform 0.6s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .65s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .65s cubic-bezier(0.3, 1, 0.1, 1), -webkit-transform .65s cubic-bezier(0.3, 1, 0.1, 1);
	z-index: -2;
}
#loading_bg{z-index: -1;transition-delay: .55s}
#loader.load #loading_line,#loader.load #loading_bg{transform: scaleX(1);}


/* =============================================
　　header
============================================= */
header{z-index: 999;}
header.scrollhead{padding: 15px 20px;}
header.scrollhead #logo img{width: 80%}
header #pc_nav li:hover{transform: translateY(-3px)}
header .inner{box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);}

.menu_stick {
    z-index: 102;
    width: 40px;
    height: 40px;
    padding-top: 8px;
    margin-right: 20px;
    box-sizing: border-box;
}
.menu_stick span:not(.before){margin-bottom: 9px}
.menu_stick.stick_trans span{
	transform: rotate(-45deg);
	margin: 0;
}
.menu_stick.stick_trans{
	padding-top: 16px;
}
.menu_stick.stick_trans span:nth-child(2){
	opacity: 0!important;
}
.menu_stick.stick_trans span:last-child{
	transform: rotate(45deg);
	margin-top: -2px;
}
.menu_stick {margin-right: 26px;}
.menu_stick div.before{
	display: inline-block;
    content: "";
    width: 97px;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
	z-index: -1;
}
#sp_nav{
	z-index: 100;
}
#sp_nav .nav_bg{background-color: rgba(255,255,255,0.5)}
#sp_nav nav{
	overflow-y: scroll;
	box-sizing: border-box;
	top: 0;
	right: -401px;
	width: 400px;
	height: 100%;
}
#sp_nav nav.stick_trans{right: 0}
#sp_nav .nav_bg{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#sp_nav a.active{color: #fff;border-bottom: 1px solid #f57f40;margin-bottom: 10px;}
#sp_nav a.active::before{
	width: 20px;
	height: 1px;
	background-color: #d6dd03;
	left: 0;
	top: 20px;
}
#sp_nav li{transform: translateX(20px);opacity: 0;transition: 0.3s}
#sp_nav li.scrollin{transform: translateX(0);opacity: 1}
#pc_nav ul{
    height: 90px;
	transition: height .5s;
}
#pc_nav ul:first-of-type{
	border-radius: 10px 0 0 10px;
}
#pc_nav ul:last-of-type{
	border-radius: 0 10px 10px 0;
}
#header.head_fix #pc_nav ul {
    height: 70px;
} 
#sp_nav nav.stick_trans div.before{
	display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#header ul.grid_10 {
    width: 86.33333%!important;
}
#header ul.grid_2 {
    width: 13.66667%!important;
}


/* =============================================
　　footer
============================================= */

/* f_contact */
#f_contact {
    /*padding: 170px 20px 150px;*/
    z-index: 10;
}
#f_contact::before{
	content: "";
	display: inline-block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	background-color: #000;
}
#f_contact .inner{z-index: 3;padding: 100px 20px 90px}
#f_contact a span.hover_box{
	content: "";
	z-index: 2;
	top: 0;
	left: 0;
	-webkit-transform: translateX(-100%);
    transform: translateX(-100%);
	transition: -webkit-transform .5s cubic-bezier(0.5, 0, 0, 1);
    transition: transform .5s cubic-bezier(0.5, 0, 0, 1);
    transition: transform .5s cubic-bezier(0.5, 0, 0, 1), -webkit-transform .5s cubic-bezier(0.5, 0, 0, 1);
}
#f_contact a:hover span.hover_box {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* sns */
.sns_links li {
    max-width: 37px;
    margin: 2%;
}

/* page-top */
#page-top{
	position: fixed;
	right: 30px;
	z-index: 99;
}
#page-top a{
	display: block;
	width: 50px;
	height: 50px;
	position: relative;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}


/*IE*/
@media all and (-ms-high-contrast: none){
}


/* =============================================
　　幅
============================================= */

/* ---------- 1100px ---------- */
@media screen and (max-width: 1100px){
#header li.pd_r-30px{padding-right: 15px;}
#header ul.grid_10 {width: 84.33333%!important;}
#header ul.grid_2 {width: 15.66667%!important;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#wrap{min-width: 100%;}
#header.head_fix #pc_nav ul {height: 90px;} 
#header .inner,#pc_nav ul:first-of-type{border-radius: 0;}
#f_contact .inner {padding: 90px 20px 90px;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
html{font-size:14px;}
.load_logo{width: 65%;}
.load_logo figure{max-width: 100%;}
#header.head_fix #pc_nav ul {height: 65px;} 
#pc_nav ul {height: 65px;}
#sp_nav nav {width: 293px;padding-top: 65px;}
.menu_stick div.before{width: 72px;}
.menu_stick {margin-right: 17px; width: 33px;}
.menu_stick::before {width: 70px;}
.menu_stick.stick_trans {padding-top: 17px;}
#f_contact .inner {padding: 70px 20px 80px;}
.sns_links li{margin: 4%;}
#page-top{right: 15px;}
#page-top a img {
    height: 30px;
    width: 30px;
}
}