@charset "utf-8";
/* CSS Document */

/* common */
html{width:100%; overflow-x: hidden;}
body { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-style: normal; font-size: 16px; line-height: 1.8; background: #fff; margin: 0;}
strong{font-weight: 700;}
.wrap{width: 1200px; margin: 0 auto;}
a{text-decoration: none;}
a:hover{opacity: 0.6;}
.h2_title{font-size: 24px; font-weight: 700; line-height: 32px;}
.h2_title::after{content:""; display:block; width:120px; height:1px; background:#000; margin:8px auto 0;}

.h2_profile_title{font-size: 24px; font-weight: 700; line-height: 32px; text-align: center; margin: 50px 0;}
.h2_profile_title::after{content:""; display:block; width:120px; height:1px; background:#000; margin:8px auto 0;}

.bg_blue{background: #66A6C7;}
.bg_yellow{background: #FFFEF3;}
.bg_aqua{background: #E5FCFF;}
.flex_btw{display: flex; width: 100%; justify-content: space-between;}
.mg_v{margin: 50px 0;}
.t_center{text-align: center;}
h3.obi{border-left:5px solid #000567; background: #EBECFF; padding: 15px 0 15px 20px; font-size: 20px; font-weight: 700; text-align: left;}

.fontL{font-size: 20px;}
.fontLL{font-size: 24px;}
.fontLL{font-size: 28px;}

.forpc{display: block;}
.forsp{display: none;}

/* float banner */
.float_banner { position: fixed; right: -300px; top: 200px; width: 280px; z-index: 1000; display: block; transition: right 0.5s ease-in-out; }
.float_banner.show { right: 10px; display: block; }
.float_banner .f_btn a { display: flex; margin-bottom: 10px; height: 100px; align-items: center;}
.float_banner .f_btn { background-color: #000; }
.float_banner .f_btn .star_icon { width: 41px; height: 37px; margin:0 20px; }
.float_banner .f_btn p { text-align: left; color: #fff; padding: 15px 0; font-size: 16px; line-height: 120% !important; }
.float_banner .f_btn p span{font-size: 16px;}
.float_banner .f_btn2 a { display: flex; margin-bottom: 10px; height: 100px; align-items: center;}
.float_banner .f_btn2 { background-color: #000567; }
.float_banner .f_btn2 .mail_icon { width: 40px; height: 32px;  margin:0 20px; }
.float_banner .f_btn2 p { text-align: left; color: #fff; padding: 15px 20px 15px 0; font-size: 16px; line-height: 120% !important; }
.float_banner .f_btn2 p span{font-size: 16px;}



/* header */
header{width: 100vw; height: 562px; background: url(images/hero_bg.png) no-repeat; background-size: cover; padding: 50px 0 0 0; position: relative;}
.header_top a{display: flex; gap: 20px; text-decoration: none; align-items: center;}
.header_top a p{font-size: 24px; text-align: left; line-height: 30px; font-weight: 700; color: #000;}
.header_top a p span{font-size:16px; font-weight: 700;}
.hero{display: flex; justify-content: space-between; align-items: center; margin: -3px 0 0 0;}
.hero div{text-align: center;}
.hero div p{font-size: 48px; font-weight: 700;}
.hero div p.hero_sub{font-size: 18px; font-weight: 700; line-height: 24px;}
.hero img{width: 550px;}



/* glnavi */
.navi{position: absolute; bottom: 0; background: rgba(0,0,0,0.7); width: 100%; padding: 5px 0; }
.glnavi{display: flex; width: 1200px; list-style: none; margin: 0 auto; justify-content: space-between;}
.glnavi li{border-left: 1px solid #fff; display: flex; flex: 1;}
.glnavi li:last-child{border-right: 1px solid #fff;}
.glnavi li.active{border-bottom: 3px solid #F9B700;}
.glnavi li a{padding: 10px 0; display: block; color: #fff; text-align: center; width: 100%; box-sizing: border-box;}


/* footer */
footer{background: #000567; padding: 30px 0;}
footer p{color: #fff;}

footer .glnavi{width:100%; margin: 0;}
footer .flex_btw {margin: 50px 0;}
footer strong{font-weight: 700; font-size: 20px;}
footer a{color: #fff;}
.copyright{text-align: center;}


/* front page */
.top_sec1{background: url(images/top_sec1_bg.jpg); padding: 80px 0; background-size: cover; text-align: center;}
.top_sec1 p{margin-top: 50px; line-height: 70px;}
.sign{width: 500px; margin: 50px auto; text-align: right;}
.sign img{width:150px; height: auto;}
.top_sec2{padding: 80px 0; text-align: center;}
.top_sec2 .h2_title{color: #fff;}
.top_sec2 .h2_title::after{background:#fff;}
.card_box{width: 31%; border-radius: 15px; box-shadow: 5px 5px 0px 0px #9f9f9f; background: #fff;}
.card_box h3{padding: 15px 0; text-align: center; width: 100%; box-sizing: border-box; background:#000567; color: #fff; font-size: 20px; font-weight: 700; border-radius: 15px 15px 0 0;}
.card_img{width: 100%; height: 250px; display: flex; align-items: center; justify-content: center;}
.card_btn{width: 70%; margin: 30px auto; background: #00B4C8; text-align: center; border-radius: 15px;}
.card_btn a{display: block; color: #fff; font-weight: 700; padding: 15px 0;}
.top_sec3{padding: 80px 0; background: #fff; text-align: center;}
.top_sec3 .wrap{width: 800px; margin: 50px auto;}
.bookside{width: 230px;}
.bookside img{width: 100%; height: auto;}
.infoside{width: 500px;}
.infoside h3{font-size: 20px; font-weight: 700; text-align: justify;}
.infoside p{text-align: justify;}
.book_lead{margin: 30px 0; padding: 20px; background: #D5F3F9; border-radius: 15px;}
.book_btn{background: #FFCC00; border-radius: 10px; margin: 20px 0 0 0; text-align: center;}
.book_btn a{display: flex; justify-content: space-around; padding: 15px 0; align-items: center; margin: 0 auto;}
.book_btn a p{font-weight: 700; color: #000;}
.amazon{width: 22px !important; height: auto;}
.arrow{width:5px !important; height: auto;}
.infoside table{width: 100%; margin: 30px 0 0 0;}
.infoside table th{width: 30%; text-align: left;}
.infoside table td{width: 70%; text-align: left;}
.top_sec4{padding: 80px 0; text-align: center;}
.top_sec4 .h2_title{margin-bottom: 30px;}
.media_list{width:100%; margin:60px 0; display:flex; gap:3%; list-style:none;}
.media_list li{width:23%;}
.media_list li a{display:block; position:relative; width:100%; overflow:hidden; border-radius:15px;}
.media_list li img{display:block; width:100%; height:auto;}
.media_list li .media_title{position:absolute; left:0; right:0; bottom:0; height:100px; padding:15px; background:rgba(0,0,0,.7); color:#fff; box-sizing:border-box; z-index:1; text-align: justify; line-height: 24px;}
.s_btns{width:80%; margin:50px auto 0; text-align: center; list-style:none;}
.s_btns li{background:#000567; width:40%; border-radius:15px; margin: 0 auto;}
.s_btns li a{display:block; position:relative; padding:15px 40px 15px 15px; color:#fff; text-align:center; text-decoration:none;}
.s_btns li a::after{content:""; position:absolute; top:50%; right:15px; transform:translateY(-50%); width:16px; height:16px; background:url('images/arrow_w.svg') no-repeat center/contain;}

.d_btns{width:80%; margin:50px auto 0; display:flex; justify-content:space-between; list-style:none;}
.d_btns li{background:#000567; width:40%; border-radius:15px;}
.d_btns li a{display:block; position:relative; padding:15px 40px 15px 15px; color:#fff; text-align:center; text-decoration:none;}
.d_btns li a::after{content:""; position:absolute; top:50%; right:15px; transform:translateY(-50%); width:16px; height:16px; background:url('images/arrow_w.svg') no-repeat center/contain;}
.top_sec5{padding: 80px 0; text-align: center;}
.blog_thumb{width: 31%;}
.blog_thumb a{display: block; position: relative;}
.blog_thumb img{width: 100%; height: auto; z-index: 0;}
.tag_cat1{background-color: #6B72FF; text-align: left; position: absolute; top: 0; left: 0; z-index: 1;}
.tag_cat1 p{padding:5px 5px 5px 26px; color:#fff; position:relative;}
.tag_cat1 p::before{content:""; position:absolute; top:50%; left:5px; transform:translateY(-50%); width:16px; height:16px; background:url('images/moon_icon.svg') no-repeat center/contain;}

.tag_cat2{background-color: #029F61; text-align: left; position: absolute; top: 0; left: 0; z-index: 1;}
.tag_cat2 p{padding:5px 5px 5px 26px; color:#fff; position:relative;}
.tag_cat2 p::before{content:""; position:absolute; top:50%; left:5px; transform:translateY(-50%); width:16px; height:16px; background:url('images/lang_icon.svg') no-repeat center/contain;}

.tag_cat3{background-color: #EA6200; text-align: left; position: absolute; top: 0; left: 0; z-index: 1;}
.tag_cat3 p{padding:5px 5px 5px 26px; color:#fff; position:relative;}
.tag_cat3 p::before{content:""; position:absolute; top:50%; left:5px; transform:translateY(-50%); width:16px; height:16px; background:url('images/bed_icon.svg') no-repeat center/contain;}

.blog_thumb_title{z-index: 2; background-color: rgba(0,0,0,0.7); width: 100%; bottom: 8px; left: 0; position: absolute; color: #fff; height: 100px; padding: 15px; box-sizing: border-box; text-align: justify; font-weight: 700;}

/* profile */
.profile_wrap{width:1200px; margin: 0 auto; display: flex; justify-content: space-between; position: relative;}
.profile_photo{position:sticky; top:calc(100vh - 726px); align-self:flex-start;}
.profile_photo img{display:block; width:380px; height:auto;}
.profile{width: 700px; padding: 0 0 50px 0;}
.profile h3{font-size: 20px; font-weight: 700;}
.profile p{margin: 20px 0 50px 0;}
.profile strong{font-size: 20px; font-weight: 700;}
.profile_btns{width:90%; list-style:none; margin:50px auto;}
.profile_btns li{background:#00B4C8; margin-bottom:20px; border-radius:15px;}
.profile_btns li a{display:block; position:relative; padding:15px 15px 15px 45px; color:#fff; font-size:20px; font-weight:700; text-decoration:none;}
.profile_btns li a::before{content:""; position:absolute; left:15px; top:50%; transform:translateY(-50%); width:20px; height:20px; background:url('images/polygon.svg') no-repeat center/contain;}


/* research */
.res_sec1{padding: 80px 0; text-align: center;}
.res_sec1 ul{width: 65%; display: flex; justify-content: space-between; list-style: none; margin: 50px auto;}
.res_sec1 ul li{background: #E9FDFF; box-shadow: 5px 5px 0px 0px #9f9f9f;}
.res_sec1 ul li a {padding: 15px; color: #000; text-align: center; display: block;}
.res_sec2{padding: 80px 0; text-align: center;}
.res_sec2 p{margin: 50px 0; text-align: justify;}
.res_sec2 table{width: 100%; margin: 50px 0; border: 1px solid #333; border-collapse: collapse;}
.res_sec2 table th{background: #66A6C7; color: #fff; text-align: center; padding: 15px 0; border-right: 1px solid #333; border-bottom: 1px solid #333; }
.res_sec2 table td{color: #000; text-align: justify; padding: 15px; border-right: 1px solid #333; border-bottom: 1px solid #333; }
.res_sec3{padding: 80px 0; text-align: center; background:#E5FCFF;}
.res_sec3 img{width: 750px; margin: 50px auto;}
.res_sec3 p{text-align: justify;}
.res_sec4{padding: 80px 0; text-align: center;}
.res_sec4 p{text-align: justify; margin: 50px 0;}


/* book */
.boo_sec1{padding: 80px 0; text-align: center;}
.boo_sec1 .wrap{width: 800px; margin: 50px auto;}
.boo_sec1 .book_lead p{margin: 0 !important;}
.boo_sec1 .book_btn p{margin: 0 !important;}
.boo_sec1 p{text-align: justify; margin: 50px 0;}
.boo_sec1 table{width: 70%; border: 1px solid #333; border-collapse: collapse; margin: 50px auto;}
.boo_sec1 table th{width: 30%; background: #66A6C7; border-left:1px solid #333; border-bottom: 1px solid #333; padding: 15px; color: #fff; font-weight: 700;}
.boo_sec1 table td{width: 70%; background: #fff; border-left:1px solid #333; border-bottom: 1px solid #333; padding: 15px; text-align: justify;}

/* column */

.column_sec{padding: 80px 0; text-align: center;}
.column_sec .h2_title{ margin-bottom: 50px;}

.h_col{width: 100vw; height: 562px; background: none; background-size: cover; padding: 0; position: relative; z-index: 0;}
.h_col img{width: 100%; height: 562px; object-fit: cover;}
.h_col .navi{z-index: 2; top: 0; bottom: auto; position: fixed;}
.h_col .column_title{position: absolute; bottom: 0; background: rgba(0,0,0,0.7); width: 100%; padding: 5px 0; z-index: 1;}
.column_title{text-align: center; color: #fff; font-size: 24px; padding: 15px; font-weight: 700;}

.column_single_sec{padding: 0; text-align: center;}
.column_single_sec .h2_title{ margin: 80px 0 50px 0;}
.column_single_sec .wrap{width: 800px;}
.column_single_sec p{text-align: justify;}
.column_single_sec img{width: 100%; height: auto; margin-bottom: 30px;}
.kakomi{margin: 30px 0; background: #EBECFF; padding: 20px; border-radius: 15px;}
.relate{border: 1px solid #333; padding: 15px; margin: 30px auto;}
.relate img{width: 250px; height: auto; margin: 0;}
.rel_txt {text-align: left;}
.rel_txt .rel_tag{padding: 10px 20px; background: #333; color: #fff; text-align: center; margin-bottom: 20px; display: inline-block;}
.relate a p{text-align: justify; color: #000;}
.relate a{ display: flex; gap:20px;}

.pagelink_box{display: flex; gap: 17.2%; margin: 50px 0;}
.plink_prev{width:20%; text-align: left;}
.plink_prev .arrow_box{ display: flex; gap:10px; align-items: center;}
.plink_prev .arrow_box img{width: 50% !important; height: auto; margin: 0 !important;}
.plink_prev .arrow_box p{font-weight: 700 !important; font-size: 20px !important; color: #000;}
.plink_prev p{font-size: 16px; color: #000;}
.plink_prev img{margin-top:20px; width: 100%; height: auto;}

.plink_next{width:20%; text-align: right;}
.plink_next .arrow_box{ display: flex; gap:10px; align-items: center;}
.plink_next .arrow_box img{width: 50% !important; height: auto; margin: 0 !important;}
.plink_next .arrow_box p{font-weight: 700 !important; font-size: 20px !important; color: #000;}
.plink_next p{font-size: 16px; color: #000;}
.plink_next img{margin-top:20px; width: 100%; height: auto;}


.plink_backbtn{border: 1px solid #333; border-radius: 15px; align-self:flex-start;}
.plink_backbtn a{display: block; padding: 15px 50px; color: #000;}

/* media */
.media_sec{padding: 80px 0; text-align: center;}
.media_sec .h2_title{margin-bottom: 50px; height: auto;}

.media_single_sec{padding: 80px 0; text-align: center;}
.media_single_sec .wrap{ display: flex; justify-content: space-between; width: 800px;}
.media_single_sec img{width: 45%;}
.media_single_sec .media_info{width: 50%;}
.media_single_sec .media_plink_wrap{width:800px; margin: 50px auto;}
.media_single_sec .pagelink_box{gap: 11.2%;}
.media_single_sec .plink_next img{width: 100% !important;}
.media_single_sec .plink_prev img{width: 100% !important;}
.media_single_sec h3{text-align: justify;}
.media_info p{margin: 30px 0; text-align: justify;}

/*sp*/
@media (max-width:800px){

/* common */
.forpc{display: none;}
.forsp{display: block;}
.wrap{width: 90%; margin: 0 auto;}
.flex_btw{flex-wrap: wrap;}

/* header */
header{height: auto; background:none; padding: 0;}
header img{width: 100%; height: auto;}
.header_top{display: none;}
.hero{display: none;}
.navi{display: none;}

/* float banner */
.float_banner{position:fixed; right:0 !important;left:0; bottom:0; top: auto; width:100%; display:flex; transform:translateY(100%); opacity:0; pointer-events:none; transition:transform 0.5s ease-in-out,opacity 0.3s ease-in-out; will-change:transform,opacity;}
.float_banner.show{transform:translateY(0); opacity:1; pointer-events:auto; display: flex;}
.float_banner .f_btn a { display: flex; margin-bottom: 0; height: 70px; }
.float_banner .f_btn { background-color: #000; width: 45%; }
.float_banner .f_btn .star_icon { width: 30px; height: 27px; margin:0 10px; }
.float_banner .f_btn p { text-align: left; color: #fff; padding: 0; font-size: 14px; line-height: 120% !important; }

.float_banner .f_btn2 a { display: flex; margin-bottom: 0; height: 70px; }
.float_banner .f_btn2 { background-color: #000567; width: 55%; }
.float_banner .f_btn2 .mail_icon { width: 40px; height: 35px; margin:0 10px; }
.float_banner .f_btn2 p { text-align: left; color: #fff; padding:0; font-size: 14px; line-height: 120% !important; }


/* footer */
footer .wrap{display: none;}

/* index */
.top_sec3 .wrap{width: 90%;}
.sign{width: 100%;}
.top_sec1 p{margin-top: 50px; line-height: 36px;}

.card_box{width: 100%; border-radius: 15px; box-shadow: 5px 5px 0px 0px #9f9f9f; background: #fff; margin-bottom: 20px;}
.card_box h3{padding: 15px 0; text-align: center; width: 100%; box-sizing: border-box; background:#000567; color: #fff; font-size: 20px; font-weight: 700; border-radius: 15px 15px 0 0;}
.card_img{width: 100%; height: 250px; display: flex; align-items: center; justify-content: center;}
.card_btn{width: 70%; margin: 30px auto; background: #00B4C8; text-align: center; border-radius: 15px;}

.bookside{width: 100%; margin-bottom: 30px;}
.infoside{width: 100%;}

.media_list{ flex-wrap: wrap; margin: 60px 0 0 0;}
.media_list li{width:47%; margin-bottom: 20px;}
.media_list li .media_title{padding: 5px; height: 85px;}

.media_list li span{display: none;}
.d_btns{width:80%; margin:50px auto 0; display:flex; justify-content:space-between; list-style:none; flex-wrap: wrap;}
.d_btns li{background:#000567; width:100%; border-radius:15px; margin-bottom: 20px;}

.blog_thumb{width: 100%;}
.s_btns li{width:100%;}

/* profile */
.profile_wrap{width:90%;}
.profile{width: 100%;}
.profile_photo{display: none;}
.profile_btns li a{padding:10px 10px 10px 45px; line-height: 24px; font-size: 18px;}
.profile p{text-align: justify;}

/* researh */
.res_sec3 img{width: 100%; height: auto;}
.res_sec1{display: none;}

.tb{overflow-x: auto; display: block; margin-bottom: 80px;}
.tb::-webkit-scrollbar {width: 10px; height: 10px;}
.tb::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 5px;}
.tb::-webkit-scrollbar-thumb {background: #00afea; border-radius: 5px;}
.tb::-webkit-scrollbar-thumb:hover {background: #555;}
.res_sec2 table{width: 600px; margin: 0 0 10px 0;}
.res_sec2 table td{text-align: left;}
.res_sec2 table td:last-child{word-break: break-all;}

/* books*/
.boo_sec1 .wrap{width: 90%; margin: 0 auto;}
.bookside img{width: 75%;}
.boo_sec1 table{width: 100%;}


/* column */
.column_sec .h2_title{font-size: 22px;}
.column_sec .wrap p{text-align: justify;}
.h_col{height: 300px;}
.h_col img{height: 300px;}
.column_single_sec .wrap{width: 90%;}
.relate img{width: 40%; height: auto;}
.rel_txt .rel_tag{padding: 5px 10px; margin-bottom: 10px;}
.plink_prev{width: 45%;}
.plink_next{width: 45%;}
.plink_backbtn{display: none;}

/* media */
.media_single_sec{padding: 80px 0 0 0;}
.media_single_sec .wrap{width: 90%; flex-wrap: wrap;}
.media_single_sec img{width: 100%; height: auto; margin-bottom: 20px;}
.media_single_sec .media_info{width:100%;}
.media_single_sec .media_plink_wrap{width: 90%; margin: 50px auto 0 auto;}
}