@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@500&display=swap');

.mincho{ font-family: 'Shippori Mincho B1', serif;}
.en{ font-family: 'Cormorant', serif;}

/*----------------------------------------------------
	☆Reset
----------------------------------------------------*/
body, h1, h2, h3, h4, h5, h6, pre, ul , ol , li, dl, dt, dd, p, img {
	margin:0;
	padding:0;
}
body {
	font-size:14px;
    font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS P Gothic',sans-serif;
    font-weight: 500;
	color:#000;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
	line-height: 1.8;
	width: 100%;
	overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}
#wrapper{
	width: 100%;
    overflow: hidden;
}

body, div, p, span, ul, ol, li, dl, dt, dd, table, tr, th, td, img, header, footer, small, section, a{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
a {
	color:#000;
	text-decoration:none;
	cursor:pointer;
	outline:none;
}
a:link {
	color:#000;
	text-decoration:none;
	outline:none;
}
a:hover {
	color:#000;
	text-decoration:none;
	outline:none;
}
ul, ol {
	list-style-type:none;
}
a:focus {
  outline: none;
}
img{ 
	vertical-align:bottom;
	width: 100%;
	-webkit-backface-visibility: hidden;
}

.sp{ display:none;}
.sp_s{ display:none;}
.pc{ display:block;}
.pc-inline{ display:inline;}

ul.disc{
	padding-left:1.5em;
}
ul.disc li{
	list-style:disc;
	margin-bottom:8px;
}

@media screen and (min-width: 769px){
img {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}
}

/*--------選択時の色---------*/

::selection { background-color:#666; color: #FFF; /* Safari */ }
::-moz-selection { background-color: #666; color: #FFF; /* Firefox */ }

/*----------------------------------------------------
	☆topcontrol
----------------------------------------------------*/
#pagetop{ opacity:0;}

#pagetop{
	background:#F04D56;
	display:block;
	height:60px;
	width:60px;
	z-index:999;
	position:fixed;
	right:20px;
	bottom:20px;
    transition: .3s;
}
#pagetop::after{
	content: "";
	width: 20px;
	height: 20px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(225deg);
	display: block;
	position: absolute;
	left: calc(50% - 10px);
	top: calc(50% - 5px);
}
#pagetop.is-fadein {
    visibility: visible;
    opacity: 0.7;
}
#pagetop.is-fadein:hover{
	opacity:1;
    transition: .3s;
	cursor: pointer;
}

/*----------------------------------------------------
	☆BASE CONTENTS PC
----------------------------------------------------*/

.deco{
    position: absolute;
    left: 0;
    top: 0;
}

/*-- header --*/
#header {
    padding: 20px 40px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
#header .headerLogo{
    width: 130px;
}


/*-- footer --*/
#footer {
	width:100%;
	position: relative;
    background: #f5804c;
    padding: 60px 0 0;
}
#footer .footerCopy{
    width: 50%;
    max-width: 252px;
    margin: 0 auto 10px;
}
#footer .footerLogo{
    max-width: 130px;
    width: 40%;
    margin: 0 auto 60px;
}

#footer address{
    padding: 24px 20px;
	text-align:center;
	color:rgba(255,255,255,0.5);
	text-decoration:none;
	font-style:normal;
    font-size: 10px;
    letter-spacing: 0.1em;
	position: relative;
	z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.2);
}

/*----------------------------------------------------
	☆COMPONENT
----------------------------------------------------*/
.head01{
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 25px;
    color: #f0442a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: 400;
}
.head01::after{
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: #f0442a;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.head01 .en{
    font-size: 14px;
    line-height: 1;
    margin-bottom: 15px;
    display: block;
}
.head01 .jp{
    font-size: 36px;
    line-height: 1.5;
}

/*----------------------------------------------------
	☆ANIMATION
----------------------------------------------------*/

.fadein,
.fadeinUp{
    opacity: 0;
}

.in .fadein,
.in.fadein{
    animation: fadein 2s ease forwards;
}

.in .fadeinUp,
.in.fadeinUp{
    animation: fadeinUp 1s ease forwards;
    animation-delay: 0;
}

.delay02{ animation-delay: 0.2s !important;}
.delay04{ animation-delay: 0.4s !important;}
.delay06{ animation-delay: 0.6s !important;}
.delay08{ animation-delay: 0.8s !important;}
.delay10{ animation-delay: 1.0s !important;}
.delay12{ animation-delay: 1.2s !important;}

@keyframes fadein{
    0%{ opacity: 0; }
    100%{ opacity: 1;}
}
@keyframes fadeinUp{
    0%{ transform: translate(0,10px); opacity: 0; }
    100%{  transform: translate(0,0px); opacity: 1;}
}


/*----------------------------------------------------
	☆BASE CONTENTS TABLET
----------------------------------------------------*/

@media screen and (max-width:900px) {
    
    #header .headerLogo {
        width: 100px;
    }
    
    .head01{
        padding-bottom: 20px;
        margin-bottom: 40px;
    }
    .head01 .jp {
        font-size: 26px;
    }
    
}


/*----------------------------------------------------
	☆BASE CONTENTS SP
----------------------------------------------------*/

@media screen and (max-width:600px) {
    
    body{
        letter-spacing: 0.1em;
		font-size: 14px;
    }
	
    .sp{ display:block;}
    .pc{ display:none;}
    .pc-inline{ display:none;}
    
    /*-- header --*/
	#header {
        padding: 20px 20px;
    }
    #header .headerLogo {
        width: 80px;
    }
    
    /*-- pagetop --*/
	#pagetop{
		height: 40px;
		width: 40px;
	}
	#pagetop::after{
		width: 10px;
		height: 10px;
		left: calc(50% - 6px);
		top: calc(50% - 3px);
	}
	
	
    /*-- footer --*/
    #footer{
        padding-top: 40px;
    }
    #footer .footerLogo{
        margin-bottom: 40px;
    }
    
    /*--- COMPONENT ---*/
    .head01 .en{
        margin-bottom: 10px;
    }
    .head01 .jp{
        font-size: 22px;
    }
	
}