@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Oleo+Script+Swash+Caps:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*--------------------
COMMON
--------------------*/
* {
	margin: 0;
	padding: 0;
	font-style: normal;
	border: 0;
	zoom: 1;
	box-sizing: border-box;}

html {
	height: 100%;
	font-size: 100%;}

html>/**/body {
	overflow: -moz-scrollbars-vertical;}

html:first-child body {
	min-height: 100%;}

body {
	margin: 0;
	padding: 0 0 0;
	border: 0;
	background: #eeeeee;
	color: #37393b;
	font-size: 1.1rem;
    font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    position:relative;}

strong {
	font-weight: bold;}
    
em{    
	background: linear-gradient(transparent 60%, rgba(255,180,0,1) 0%);}

img {
	max-width: 100%;
	height:auto;}

a img{
	display:block;}

a {
	text-decoration: none;
	color: #51769e;
	transition: .5s;}

a:hover {
	/**/
	opacity: 0.7;
	transition: .5s;}


.txt-center{text-align:center;}
.txt-left{text-align:left;}
.txt-right{text-align:right;}

.txt-xlarge{font-size:140%;}
.txt-large{font-size:120%;}
.txt-small{font-size:90%;}

.txt-red{}
.txt-orange{color:#ff6600;}

/*--------------------
GRID
--------------------*/
.grid,
.flex2,
.flex2-2,
.flex3,
.flex3-2,
.flex4,
.flex5 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;/*   Safari etc. */
	-ms-align-items: stretch;/*  IE10        */
	align-items: stretch;
	-webkit-flex-wrap: wrap;/* Safari6.1以降 */
	-ms-flex-wrap: wrap;/*IE10*/
	flex-wrap: wrap;}

/* 最終行の間隔調整 */
.flex4:before,
.flex5:before {
	content: "";
	display: block;
	order: 1;}

.flex3:after,
.flex3-2:after,
.flex4:after,
.flex5:after {
	content: "";
	display: block;}

.grid3-2 {
	width: 65.5%;}

.grid4-3 {
	width: 74.325%;}

.flex2>*,
.flex2-2>* {
	width: 48.25%;}

.grid4-2{
	width: 48.65%;}

.grid3-1,
.flex3>*,
.flex3-2>*,
.flex3:after,
.flex3-2:after {
	width: 31%;}

.grid4-1,
.flex4>*,
.flex4:before,
.flex4:after {
	width: 22.975%;}

.flex5>*,
.flex5:before,
.flex5:after {
	width: 18%;}

.flex2>*,
.flex2-2>*,
.flex3>*,
.flex3-2>*{}

.grid>*,
.flex3>*,
.flex4>*,
.flex5>* {
    margin-bottom:1.5em;}

@media screen and (max-width:640px) {
	.grid3-1,
	.grid3-2,
	.grid4-1,
	.grid4-2,
	.grid4-3,
	.flex2>*,
	.flex3>*,
	.flex3:after {
		width: 100%;}

	.flex2-2>*,
	.flex3-2>*,
	.flex4>*,
	.flex4:before,
	.flex4:after,
	.flex5>*,
	.flex5:before,
	.flex5:after {
		width: 47.5%;}

	.grid>*,
	.flex2>*,
	.flex2-2>*,
	.flex3-2>*,
	.flex3>*,
	.flex4>*,
	.flex5>* {}
}



/*--------------------
HEADER
--------------------*/
header{
width:100%;
background:#062839;
margin:0;
padding:0;
}

header > div{
width:90%;
max-width:1000px;
margin:0 auto;
padding:0;
color:#ccc;
font-size:80%;
text-align: center;
}


header img{
width:8%;
margin:0 auto;
padding:30px 0 20px;
}

header ul{
list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;/*   Safari etc. */
	-ms-align-items: stretch;/*  IE10        */
	align-items: stretch;
	-webkit-flex-wrap: wrap;/* Safari6.1以降 */
	-ms-flex-wrap: wrap;/*IE10*/
	flex-wrap: wrap;}


header ul li{
margin:0;
}

header ul li a{
display: block;
width:100%;
padding:0.75em 1em;
color:#ccc;
border:1px solid rgba(255,255,255,0.1);
border-radius: 9999px
}

header ul li a:hover{
color:#fff;
background:rgba(255,255,255,0.5);
}

@media screen and (max-width: 768px){

header > div{
width:100%;
max-width:1000px;
}

header img{
width:10%;
margin:0 auto;
padding:20px 0;}

header ul{gap: 0px;}

header ul li a{
display: block;
width:100%;
padding:0;
color:#ccc;
border:none;
}
}

/*--------------------
FOTTER
--------------------*/

footer{
width:100%;
background:#062839;
}

footer > div{
width:90%;
max-width:1000px;
margin:0 auto;
padding:40px 0;
color:#ccc;
font-size:90%;
}

footer > div img{
width:50%;
}

footer div p{}

footer small{
display: block;
text-align:center;
width:90%;
max-width:1000px;
margin:0 auto;
padding:1em 0;
color:rgba(255,255,255,0.5)
}

@media screen and (max-width: 768px){
footer > div{
width:80%;
}
}


/*--------------------
CONTENTS
--------------------*/

main{
width:100%;
}

section{
width:100%;
text-align: left;
}

#section1{background: linear-gradient(to right, #ddd , #efefef);}
#section2{background: linear-gradient(to right, #efefef , #ddd);}
#section3{background: linear-gradient(to right, #ddd , #efefef);}
#section4{background: linear-gradient(to right, #efefef , #ddd);}
#section5{background: linear-gradient(to right, #ddd , #efefef);}

section > div{
max-width:1000px;
width:90%;
margin:0 auto;
padding:100px 0;
}

section > div h2{
font-size:300%;
font-weight:700;
margin:1em auto 1em;
text-align:center;
text-transform: uppercase;
color:#062839;
line-height:1em;
}

section > div h2:first-child{
margin:0 auto 1em;}

h2 ruby{
display: block;
font-size:50%;
color:#15858f;
}

@media screen and (max-width: 768px){

section > div{
max-width:1000px;
width:80%;
}

section > div h2{
font-size:200%;
}
}


section div h3{
font-size:150%;
margin-bottom: 0.5em;
color:#15858f;
}

section div p{
margin-bottom: 1em;}

section div table{
width:100%;
margin-bottom: 1em;
border-collapse: collapse;}

section div table th,
section div table td{
padding:1em 2em;
border-bottom:1px solid #fff;
background:rgba(255,255,255,0.1);}

section div table tr:first-child th,
section div table tr:first-child td{
border-top:1px solid #fff;}

section div table tr:nth-child(even) th,
section div table tr:nth-child(even) td{
background:rgba(255,255,255,0.2);
}

section .blk ul{
margin-left:1em;
margin-bottom: 1em;}

section > div > img{
margin-bottom: 1em;}

section div p:last-child,
section div table:last-child,
section div ul:last-child,
section > div > img:last-child{
margin-bottom:0;
}

article p,article li{
font-size:90%;
}

.blk{
display: block;
background:#eee;
border:1px solid #fff;
border-radius:10px;
padding:2em;
margin-bottom: 2em;
}

.notes{
color:#999;
font-size:80%;
}


article ul{
margin:0;
list-style: none;
}

article li{
padding:0.5em 1em;
margin-bottom:1em;
border:1px solid #ddd;
border-radius:6px;
background:#eee;
color:#777;
}


@media screen and (max-width: 768px){

section div table th,
section div table td{
width:100%;
display:block;}

section div table tr:nth-child(even) th,
section div table th{
background:#ddd;}
}

/*--------------------
PARALLAX
--------------------*/

.parallax_content{
  height: 500px;
}

.parallax_content::before{
background-image: url("img/img01.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
  -webkit-filter: grayscale(100%);}


.parallax_content img{
margin:100px auto;
width:10%;
}

.parallax_content p{
color:#fff;
display:block;
text-transform: uppercase;
font-weight:600;
margin:200px auto 20px;
border:6px solid #fff;
font-size:300%;
padding:0.5em;
max-width:80%;
text-align:center;}

.parallax_content p ruby{
display: block;
font-size:50%;
text-transform: none;
font-family: "Lobster", sans-serif;
font-weight: 400;
font-style: normal;
}

.parallax_content h1{
color:#fff;
font-size:70%;
font-weight:300;
text-align:center;}

@media screen and (max-width: 768px){
.parallax_content p{
margin:150px auto 20px;
border:none;
font-size:200%;
padding:0;
max-width:90%;
text-align:center;}
}


/*--------------------
LINK
--------------------*/

#link_instagram,
#link_youtube,
#link_shop{
display:block;
width:50px;
height:140px;
position: fixed;
right: 0px;
z-index:99;
}

#link_lang{
display:block;
width:50px;
height:50px;
position: fixed;
right: 0px;
z-index:99;
}

#link_instagram{top: 200px;}
#link_youtube{top: 360px;}
#link_shop{top: 520px;}
#link_lang{top: 680px;}

#link_instagram img,
#link_youtube img,
#link_shop img{
width:50px;
height:140px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
text-align: center;
display: block;
opacity:0.8;
}

#link_lang img{
width:50px;
height:50px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
text-align: center;
display: block;
opacity:0.8;
}

#link_instagram img:hover,
#link_youtube img:hover,
#link_shop img:hover,
#link_lang img:hover{
	opacity:1;}

@media(max-width: 768px){
#link_instagram{top: 200px;}
#link_youtube{top: 350px;}
#link_shop{top: 500px;}
#link_lang{top: 650px;}

#link_instagram,
#link_youtube,
#link_shop{
width:40px;
height:112px;
}
#link_lang{
width:40px;
height:40px;
}

#link_instagram img,
#link_youtube img,
#link_shop img{
width:40px;
height:112px;}

#link_lang img{
width:40px;
height:40px;
}

}