@charset 'utf-8';

/*----------------------------------------------------
 base
----------------------------------------------------*/
html, body { width: 100%; }
html {
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

/*----------------------------------------------------
 reset
----------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;padding:0;border:0;outline:0;
    font-size:inherit;font-weight:inherit;
    vertical-align:baseline;background:transparent;
}
article,aside,details,figcaption,figure,footer,header,
hgroup,menu,nav,section,main,summary{ display:block; }
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
::after, ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*----------------------------------------------------
 base
----------------------------------------------------*/

body {
		font-family: ヒラギノ明朝 Pro W3,Hiragino Mincho Pro,HiraMinProN-W3,游明朝,
    Yu Mincho,游明朝体,YuMincho,HGS明朝E,HG明朝E,ＭＳ Ｐ明朝,MS PMincho,
    "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","游明朝",
    "Yu Mincho","游明朝体","YuMincho","HGS明朝E","HG明朝E",
    "Hiragino Mincho Pro W3", "Hiragino Mincho Pro",
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.8;
    font-size: 22px;
    text-align: center;
    color: #d39951;
    word-wrap: break-word;
    min-width: 320px;
    min-height: 100vh;
    margin:0;
    padding:0;
    background-color: #02021E;
}

@media screen and ( max-width:768px ){
	body{
		font-family: "Sawarabi Mincho", serif;
	}
}

.gothic{
    font-family: 
    "ヒラギノ角ゴ ProN W3","HIragino Kaku Gothic Pro W3",
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro",YuGothic,"游ゴシック",
    "メイリオ",Meiryo,"Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS P Gothic",sans-serif;
}
.clear { clear: both; }
.clearfix { *zoom: 1; }
.clearfix:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    overflow: hidden;
}
a{
    outline:0;
    border:0;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-out 0s;
    -moz-transition: opacity 0.3s ease-out 0s;
    transition: opacity 0.3s ease-out 0s;    
}
a{
	color:#d39951;
	text-decoration: underline;
	outline: 0;
}

a:hover {
	color:#fff;
	cursor: pointer;
	opacity:0.6;
	filter:alpha(opacity=60);
}
@media screen and (max-width:768px) { .pc{ display: none; } }
@media screen and (min-width:769px) { .sp{ display: none; } }
@media screen and (max-width:480px) {
    body{font-size: 3.6vw;line-height: 1.7;}
}

/*----------------------------------------------------
common
----------------------------------------------------*/
h1,h2,h3,h4,h5,p{
    margin:0;
    padding:0;
}
h4{
	font-weight: bold;
	border-bottom: 1px dotted #d39951;
	margin:auto 15% 5% 15%;
	padding-bottom:1%;

}
.fbolder{ font-weight: 700; }
.tacenter{ text-align: center; }
.taleft{ text-align: left; }
.taright{ text-align: right; }
.hidden{ display: none; }
.novisible{visibility: hidden;}
.full1{ width:100%;vertical-align: top;max-width:769px; }
.full2{ width:100%;vertical-align: bottom; }
.sred{ color:#c30f23; }
.dtxt1{  font-size: 115%;font-weight: bold; }
.dtxt2{  font-size: 140%;font-weight: bold; }
.uline{ text-decoration: underline; }
.y_bg{ background: #fff000; }
.oline{ background: linear-gradient(transparent 60%, #ffdce9 0%); }
.yline{ background: linear-gradient(transparent 60%, #ffe600 0%); }

.sec1_txt1{
	width: 650px;
	margin:0 auto;
	text-align: center;
	padding:100px 0;
}

.sec2_txt1{
	width: 650px;
	margin:0 auto;
	text-align: left;
	padding: 40px 0 100px;
}

.sec2_txt1 p {
	text-indent: -1em;
	padding-left: 1em;
}

.sec3_txt1{
	width: 600px;
	margin:0 auto;
	text-align: center;
	padding: 40px 0 0 0;
}
.note1{
	font-size:smaller;
	text-align: left;
}
.note1 p{
	text-indent: -1em;
	padding-left: 1em;
}
.btnarea1{
	width:100%;
	max-width: 460px;
	text-align: center;
	margin: 0 auto 0;
	padding:40px 0 20px 0;
}
.note2{
	font-size:smaller;
	text-align: center;
}
.sec3_txt2{
	width: 650px;
	margin:0 auto;
	text-align: center;
	padding: 40px 0 100px;
}
.sec4_txt1{
	width: 650px;
	margin:0 auto;
	text-align: center;
	padding: 40px 0 100px;
}
.btnarea2{
	width:100%;
	max-width: 447px;
	margin: 0 auto 0;
	padding:40px 0 0 0;
}
.sec5_txt1{
	width: 650px;
	margin:0 auto;
	text-align: left;
	padding: 40px 0 0 0;
}
.sec5_txt1 p {
	text-indent: -1em;
	padding-left: 1em;
}
.sec5_txt1{
	width: 650px;
	margin:0 auto;
	text-align: left;
	padding: 40px 0;
}
.sec5_txt2{
	width: 650px;
	margin:0 auto;
	text-align: left;
	padding: 0 0 100px 0;
}
.sec5_txt2 h4{
	text-decoration: underline;
}
.sec5_txt3 {
	padding: 5%;
	border:solid 1px #d39951;
}


@media screen and (min-width:769px) {
	.sttl{
		width:50%;
		max-width:450px;
		margin:0 auto;
		vertical-align: middle;
	}
}
@media screen and ( max-width:768px ){
	.container{
		margin:0 15px;
	}
	.sec1_txt1{
		width:100%;
		padding:10vw 0;
	}
	.sec2_txt1{
		width:100%;
		padding:6vw 0 20vw;
	}
	.sec3_txt1{
		width:100%;
		padding:6vw 0 0;
	}
	.sec3_txt2{
		width:100%;
		padding:6vw 0 20vw;
	}
	.sec4_txt1{
		width:100%;
		padding:6vw 0 20vw;
	}
	.sec5_txt1{
		width:100%;
		padding:6vw 0 0;
	}
	.sec5_txt2{
		width:100%;
		padding:6vw 0 20vw;
	}
	.sttl{
		width:100%;
		max-width: 450px;
		margin:0 auto;
		vertical-align: middle;
	}
}
@media screen and ( max-width:480px ){
}

#footer{
	text-align: center;
	padding:80px 0 90px;
}
#footer .copy{
	width:60%;
	margin:0 auto;
	font-size:smaller;
}
@media screen and ( max-width:768px ){
	#footer{
		padding:12vw 0 13vw;
	}
	#footer .copy{
		width:80%;
		margin:0 auto;
	}
}

.ct_link{
    display: block;
    width:80%;
    max-width: 800px;
    margin:0 auto;
}
@media screen and ( min-width:769px ){
    .ct_link{
        animation: mov05 0.4s ease 0s infinite alternate none running;
    }
}

.btn{ animation: mov05 0.4s ease 0s infinite alternate none running;}
.btn:hover{ animation: rumble 0.1s linear infinite; }
@keyframes mov05 {
    0% { transform: scale(0.97); }
    100% { transform: scale(1.01); }
}
@keyframes rumble{
    0%  {transform:rotate(0deg) translate(0,0);}
    25% {transform:rotate(0.4deg)   translate(1px,1px);}
    50% {transform:rotate(0deg) translate(0,0);}
    75% {transform:rotate(-0.4deg)  translate(1px,1px);}
    100% {transform:rotate(0deg) translate(0,0);}
}