@charset "utf-8";
/*-------------------------------------------------
	Loading
--------------------------------------------------*/
/* Loading背景画面設定　*/
#splash {/*fixedで全面に固定*/position: fixed;z-index: 9999;width: 100%;height: 100%;text-align:center;color:#fff;background:#000;display: none;font-family: "m-plus-rounded-2m", sans-serif;font-weight: 100;font-style: normal;}
/* Loadingバー中央配置　*/
#splash_text {position: absolute;top: 50%;left: 50%;z-index: 9999;width: 30%;transform: translate(-50%, -50%);color: #fff;}
/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{height: 2px;}
/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
body.appear{background:#eee;/*画面を開いた後の背景色を指定*/}
.splashbg{display: none;content: "";position:fixed;transform: scale(100);background-color: #fff;/*伸びる背景色の設定*/z-index: 9999;/*丸のスタートの形状*/top:calc(50% - 1rem);/*50%から円の半径を引いた値*/left:calc(50% - 1rem);/*50%から円の半径を引いた値*/width: 2rem;height: 2rem;}
/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{display: block;border-radius: 50%;	animation-name:PageAnime;animation-duration:1s;animation-fill-mode:forwards;}
@keyframes PageAnime{
0% {/*丸のスタート位置と形状*/transform: scale(100);}
100% {/*丸の終了位置と形状*/transform: scale(0);display: none;/*終了時は消える*/}
}
/*画面遷移の後現れるコンテンツ設定*/
#container{opacity: 0;/*はじめは透過0に*/}
/*bodyにappearクラスがついたら出現*/
body.appear #container{animation-name:PageAnimeAppear;animation-duration:1s;animation-delay: 0.8s;animation-fill-mode:forwards;opacity: 0;}
@keyframes PageAnimeAppear{
0% {opacity: 0;}
100% {opacity: 1;}
}
@media (max-width: 900px) {
#splash_text {width: 60%;}
}/*END*/ 
/*-------------------------------------------------
main
--------------------------------------------------*/
#main { width: 100%; height: 100vh;position: relative;} 
#main .inner{ width: 80%;height: 100%; max-width: 1200px;margin: 0 auto;display: flex; align-items: center; justify-content: center;}
#main .inner .in_box{ width: 100%;display: flex; align-items: center; justify-content: center;}
#main .inner .img_box{ margin: 0 auto; width: 25vw;}
@media (max-width: 1600px) {
#main .inner .img_box{ margin: 0 auto; width: 400px;}
}/*END*/ 
@media (max-width: 900px) {
#main .inner .in_box{ display: block; }
#main .inner .img_box{ width: 300px;}
}/*END*/ 
@media (max-width: 450px) {
#main .inner .in_box{ display: block;}
#main .inner .in_box{ display: block; }
#main .inner .img_box{ width: 70vw;}
}/*END*/ 
@media (max-width: 400px) {
#main { height: -webkit-fill-available;} 
#main .inner{ height: -webkit-fill-available; }
}/*END*/ 
/*--- scrolldown1 ---*/
.scrolldown1{position: fixed;left:50%;bottom:0px;height:50px;}
.scrolldown1 span{position: absolute;left:-15px;top: -15px;color: #000;font-size: 0.7rem;letter-spacing: 0.05em;}
.scrolldown1::after{content: "";position: absolute;top: 0;width: 1px;height: 10px;background: #000;animation: pathmove 1.4s ease-in-out infinite;opacity:0;}
@keyframes pathmove{
0%{height:0;top:0;opacity: 0;}
30%{height:20px;opacity: 1;}
100%{height:0;top:50px;opacity: 0;}
}
/*-------------------------------------------------
	profile
--------------------------------------------------*/
#profile { margin-top: 200px;width: 100%; position: relative; text-align: center;color: #000; font-size: 18px;} 
#profile .inner{padding: 100px 50px;  width: 80%;height: 100%; max-width: 1200px;margin: 0 auto;  background: #fff; border-radius: 20px;}
#profile .inner h2 {font-size: 48px; line-height: 1.2; letter-spacing: 2px; font-family: Anders;}
#profile .inner .profile_txt{ margin-top: 80px;display: flex; align-items: center; justify-content: center;}
/* pro_l */
#profile .inner .profile_txt .pro_l{ width: 95%;max-width: 600px; display: flex; align-items: center; justify-content: center;}
#profile .inner .profile_txt .pro_l .img_box{ width: 50%;}
/* center_bar */
#profile .inner .profile_txt .center_bar{ width: 1px; height: 345px; background: #000;margin: 0 50px;}
/* pro_r */
#profile .inner .profile_txt .pro_r{ width: 95%;max-width: 600px;}
#profile .inner .profile_txt .pro_r .inner_r{ max-width: 420px; margin: 0 auto;text-align: left;}
#profile .inner .profile_txt .self {margin-top: 30px; }
#profile .inner .profile_txt h3{ font-size: 30px;}
#profile .inner .profile_txt ul{max-width: 400px;margin-top: 30px; display: flex; flex-wrap: wrap;}
#profile .inner span{ display: inline-block;}

@media (max-width: 1300px) {
#profile .inner .profile_txt .pro_l .img_box{ width: 60%;}
}/*END*/ 
@media (max-width: 1050px) {
#profile .inner .profile_txt .pro_l .img_box{ max-width: 240px;}
#profile { font-size: 16px;} 
#profile .inner .profile_txt h3{ font-size: 24px;}
}/*END*/ 
@media (max-width: 950px) {
#profile .inner{padding: 100px 0px;  width: 80%;}
#profile .inner .profile_txt{ margin-top: 80px;display: block;}
#profile .inner .profile_txt .pro_l{ margin: 0 auto;}
#profile .inner .profile_txt .pro_r{ margin: 0 auto; max-width: 330px;}
#profile .inner .profile_txt .center_bar{ width: 80%; height: 1px; background: #000;margin: 60px auto;}
}/*END*/ 
@media (max-width: 600px) {
#profile .inner{padding: 80px 0px;}
#profile .inner .profile_txt .pro_l .img_box{ max-width: 210px;}
#profile .inner h2 {font-size: 38px;letter-spacing: 2px; }
#profile { font-size: 14px;} 
#profile .inner .profile_txt h3{ font-size: 22px;}
#profile .inner .profile_txt h3 span{ font-size: 14px;}
#profile .inner .profile_txt .pro_r{ margin: 0 auto; max-width: 280px;}
#profile .inner .profile_txt ul{display: block;}
}/*END*/ 
@media (max-width: 450px) {
#profile .inner{padding: 60px 0px;  width: 85%;}
#profile .inner .profile_txt .pro_l .img_box{ max-width: 180px;}
#profile { font-size: 14px;} 
#profile .inner .profile_txt h3{ font-size: 20px;}
#profile .inner .profile_txt .pro_r{ margin: 0 auto; max-width: 230px;}
}/*END*/