@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@200..900&display=swap');

/* CLEAR FIX */
.cf:after{content: "."; display: block; height: 0;  clear: both; visibility:hidden;}
.cf{display: inline-table;} 
/* Hides from IE Mac */
* html .cf{height: 1%;}
.cf{display:block;}
/* BOXSIZING */
.boxSizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
/* iOSでのsubmitのスタイルをリセット */
input[type="submit"],input[type="button"] {border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: none; appearance: none; border: none; box-sizing: border-box; cursor: pointer;}
input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,input[type="button"]::focus {outline-offset: -2px;}

/* =======PRUGIN SETTINGS======= */
/* PAGE TOP */
.pagetop {z-index: 999; position: fixed;bottom: 10px;right: 10px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0.3);-moz-transform: scale(0.3);-ms-transform: scale(0.3);-o-transform: scale(0.3);transform: scale(0.3);-webkit-transition: all .4s;-moz-transition: all .4s;	-o-transition: all .4s;	transition: all .4s;}
.pagetop a {display: block;width: 50px;	height: 50px;background-color: #000;text-align: center;color: #fff;font-size: 1em;text-decoration: none;line-height: 50px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;}
.pagetop.show {	opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}

/* ======= BASIC ======= */
html,body { height: 100%; width: 100%; min-width: 1180px;}
body{font-family: "Noto Sans JP", serif; color:#333; letter-spacing: 0.1em; font-size:16px;}

img {max-width: 100%; height: auto;}
a{text-decoration: none; color:#727171; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
a:hover{color:#5389B0;}
strong{font-weight:bold;}
br.sp{display:none;}

/* OTHER-STYLING */
.en{font-family: "Montserrat", serif; margin: 0 auto;}
.youtube {position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}

/* ======= HEADER ======= */
header {width: 90%; margin: 0 auto; padding: 5% 0;}
header h1 img {width: 180px; height: auto;}

header section {text-align: right; margin-top: 50px; line-height: 2; letter-spacing: 0.2em;}
h2 {font-weight: 700; font-size: 21px; margin-bottom: 30px; display: flex; align-content: center; align-items: center; justify-content: flex-end;}
header section h2:before { content: "";  border-bottom: 1px solid #333;  display: block;  width: 20px; margin-right: 13px;}

/*  ======= TOP =======  */
section.wrapCont {width: 90%; margin: 0 auto; position: relative; z-index: 1;}

#stage01 {margin-bottom: 50px;}
#stage01 h3 img {width: 100%; margin-bottom: 50px;}
#stage01 video {width: 100%; height: auto;}

#stage02 h3 {font-size: 3vw; font-family: Montserrat; margin-bottom: 30px;}
#stage02 article {border-top: 1px solid #CCC; padding: 50px 0; display: flex; align-content: flex-start; align-items: flex-start;}
#stage02 article h4 {font-size: 24px; display: flex; align-content: center; align-items: center; width: 400px;}
#stage02 article h4:before {content: ""; display: block; border-bottom: 1px solid #333; width: 14px; margin-right: 17px;}
#stage02 article p {letter-spacing: 0.2em;}
#stage02 article p span {display: block; margin-top: 20px;}

/* ======= FOOTER ======= */
footer {width: 100%; background: #333; color: #FFF; padding: 150px 0; margin-top: 100px;}
article.foot01 h1 img {width: 300px;}
article.foot01 p {margin-top: 20px; font-size: 11px;}
article.foot02 {margin-left: 500px;}
article.foot02 p {margin-bottom: 10px; font-family: 'Montserrat','Noto Sans JP';}
article.foot02 p span {font-family: 'Montserrat'; width: 250px; display: inline-block;}
article.foot02 p span:before {content: "-"; margin-right: 10px;}

@media screen and (max-width: 1279px) {
 /*　================================ for ipad ================================　*/
}

@media screen and (max-width: 480px) {
 /*　================================ for iphone ================================　*/
html,body { height: 100%; width: 100%; min-width: 100%; font-size: 14px;}
br.pc{display:none;}
br.sp{display:block;}

header h1 {margin: 30px 0 100px 15px;}
header section {text-align: left; margin-bottom: 50px;}
header section h2 {font-size: 17px; display: flex; align-content: center; align-items: center; justify-content: flex-start; letter-spacing: 0; margin-bottom: 20px;}
header section h2:before {content: ""; width: 14px; margin-right: 10px; }
header section p {padding: 5%; box-sizing: border-box;}

#stage01 {margin-bottom: 100px;}
#stage01 h3 img {margin-bottom: 24px;}
#stage02 article {border-top: 1px solid #CCC; padding: 45px 0; display: flex; align-content: flex-start; align-items: flex-start; flex-direction: column;}
#stage02 article h4 { font-size: 18px; display: flex; align-content: center; align-items: center; width: 100%; margin: 0 0 20px 0;}
#stage02 article p {  letter-spacing: 0.1em; text-align: justify; padding: 0 28px; box-sizing: border-box;}
#stage02 h3 {font-size: 24px;}

footer {padding: 100px 8%; margin-top: 50px; box-sizing: border-box;}
article.foot01 {margin-bottom: 100px;}
article.foot01 h1 img {width: 200px;}
article.foot02 {margin-left: 0;}
article.foot02 p span {width: 100%; display: block; margin-bottom: 10px;}
article.foot02 p {margin-bottom: 30px;}

}