@charset "UTF-8";

/*index
----------------------------*/
#main_heading{max-width:1600px;text-align: center; margin:170px auto 45px auto;}
#main_heading svg{max-width:994px;margin:auto;}

#textbox_boder{
width: 0;
height: 1px;
margin: 30px auto 0 auto;
background:rgba(69,69,77,1);
animation: main_textbox_boder 2s ease-out 1s normal;
animation-fill-mode:forwards;
}
@keyframes main_textbox_boder {
0% {width: 0;}
100% {width: 100%;}
}

#main_img{max-width:1200px;margin:120px auto 80px auto;}

#name_area{max-width:1200px;font-weight:900;text-align:center;margin:0 auto;padding:0 0 30px 0;border-bottom:#45454d 1px solid;}
#name_area #name_title{font-size:140%;}
#name_area #name_main{font-size:550%;letter-spacing:0.2em;margin:50px auto;}
#name_area #name_romaji{font-size:100%;}

ul#jobtitle{font-size:120%;font-weight:900;letter-spacing:0;margin:70px auto 150px auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;}
ul#jobtitle li{width:44.25%;margin:0 0 20px 0;padding:2% 0 2% 5%;background-color:#f2f7fa;position:relative;}
ul#jobtitle li::after{
position: absolute;
top: 50%;
left:30px;
transform:translateY(-50%);
content: '';
width: 5px;
height:5px;
border: solid 5px #70c8ec;
border-radius:100%;
}
@media screen and (max-width:1600px) {
#main_heading{max-width:90%;}
}
@media screen and (max-width:1200px) {
#main_heading{text-align:center; margin:170px auto 45px auto;}
#main_img{max-width:90%;margin:120px auto 80px auto;}
#name_area{max-width:90%;}
#name_area #name_main{font-size:450%;letter-spacing:0.1em;margin:50px auto;}
ul#jobtitle{width:90%;;margin:70px auto 70px auto;}
ul#jobtitle li{line-height:120%;padding:2% 2% 2% 2%;}
ul#jobtitle li::after{display:none;}
}
@media screen and (max-width:1000px) {
#main_heading{margin:100px auto 0 auto;}
#main_img{margin:50px auto 50px auto;}
#name_area #name_main{font-size:350%;}
ul#jobtitle li{width:90%;padding:5%;}
}
@media screen and (max-width:598px) {
#name_area #name_title{font-size:100%;}
#name_area #name_main{font-size:250%;margin:20px auto;}
#name_area #name_romaji{font-size:100%;}
}

ul#career{font-size:90%;padding:0 0 50px 0;border-bottom:#45454d 1px solid;}
ul#career li{padding:0 0 10px 20px;position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;}
ul#career li:before {background:#70c8ec;content: "";height:10px;width:10px;left:0;position:absolute;top:10px;}
ul#career .career_year{width:10%;}
ul#career .career_details{width:90%;margin:0 auto 0 0;}

ul#career_current{font-size:130%;padding:50px 0;font-weight:900; display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;}
ul#career_current li{width:98%;margin:0 0 20px 0;padding:0 0 0 2%;position:relative;}
ul#career_current li::after{
position: absolute;
top: 50%;
left:0;
transform:translateY(-50%);
content: '';
width: 5px;
height:5px;
border: solid 5px #70c8ec;
border-radius:100%;
}

ul#career_current li.line2{width:98%;margin:0 0 20px 0;padding:0 0 0 2%;position:relative;}
ul#career_current li.line2::after{
position: absolute;
top:25%;
left:0;
transform:translateY(-50%);
content: '';
width: 5px;
height:5px;
border: solid 5px #70c8ec;
border-radius:100%;
}

.bt_fractal{max-width:420px;margin:0 auto;}

@media screen and (max-width:1200px) {
ul#career_current li{width:97%;padding:0 0 0 3%;}
ul#career_current li.line2{width:97%;padding:0 0 0 3%;}
ul#career .career_year{width:15%;}
ul#career .career_details{width:85%;}
}
@media screen and (max-width:1100px) {
ul#career_current li{width:97%;margin:0 auto 20px 3%;padding:0 0 0 0;list-style:circle;list-style-position:outside;}
ul#career_current li::after{display:none;}
ul#career_current li.line2{width:97%;margin:0 auto 20px 3%;padding:0 0 0 0;list-style:circle;list-style-position:outside;}
ul#career_current li.line2::after{display:none;}	
}

@media screen and (max-width:1000px) {
ul#career_current{font-size:110%;}
ul#career li{flex-direction:column;}
ul#career .career_year{width:100%;margin:0 auto;}
ul#career .career_details{width:100%;margin:0 auto;}
}

ul#sns{max-width:1000px;margin:0 auto 80px auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;}
ul#sns li{width:160px;height:70px;margin:0 0 20px 0;padding:0;position: relative;}
ul#sns li a{position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-999px;z-index:2;}
ul#sns li img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

#bg_line{background-color:#00cd83;}
#bg_facebook{background-color:#4172bc;}
#bg_twitter{background-color:#5dc5e9;}
#bg_instagram{background-color:#ef5079;}
#bg_youtube{background-color:#ff0000;}
#bg_note{background-color:#41c9b5;}


#bg_line img{max-width:121px;}
#bg_facebook img{max-width:24px;}
#bg_twitter img{max-width:43px;}
#bg_instagram img{max-width:43px;}
#bg_youtube img{max-width:96px;}
#bg_note img{max-width:92px;}

#movie_cover{text-align:center;font-size:110%;font-weight:900;max-width:1000px;margin:0 auto;}
#movie_cover a:link{color:#29292e;text-decoration:underline;}
#movie_cover a:visited{color:#29292e;text-decoration:underline;}
#movie_cover a:hover{color:#0a5071;text-decoration:none;}
#movie_cover a:active{color:#0a5071;text-decoration:none;}

#movie_cover #movie{width:100%;margin:0 auto 30px auto;position:relative;padding-top:56.25%;}
#movie_cover #movie iframe{position:absolute;top:0;right:0;width:100%!important;height:100%!important;}

@media screen and (max-width:1200px) {
ul#sns{max-width:90%;}
ul#sns li{width:16%;}
#movie_cover #movie{width:90%;}
}
@media screen and (max-width:1000px) {
ul#sns{margin:0 auto 30px auto;}
ul#sns li{width:48%;margin:0 0 15px 0;}
}

ul#contact_bt{max-width:1200px;margin:100px auto 80px auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;}
ul#contact_bt li{font-size:130%;color:#FFFFFF;font-weight:900;letter-spacing:-0.1em;line-height:130%;width:30%;margin:0 auto 50px auto;padding:15px 0;text-align:center;position:relative;z-index:1;background-color:#115fad;box-shadow:5px 5px 0px 0px #1eb9ee;}
ul#contact_bt li a {position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-999px;z-index:2;}
ul#contact_bt li #icon_1{max-width:71px;margin-bottom:20px;}
ul#contact_bt li #icon_2{max-width:59px;margin-bottom:10px;}
ul#contact_bt li #icon_3{max-width:78px;margin-bottom:20px;}
ul#contact_bt li #cost{padding:10px;}

#text_law{max-width:260px;margin:100px auto 0 auto;}

@media screen and (max-width:1200px) {
ul#contact_bt li{font-size:110%;}
}
@media screen and (max-width:1000px) {
ul#contact_bt{margin:0 auto 0 auto;flex-direction:column;}
ul#contact_bt li{width:60%;margin:0 auto 50px auto;padding:15px 0;}
}
@media screen and (max-width:798px) {
ul#contact_bt li{width:90%;margin:0 auto 50px auto;padding:15px 0;}
}