@charset "UTF-8";

/* ===== CSSリセット ===== */
* { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; word-wrap:break-word; }
div, ul, section { overflow:hidden; }
ul { list-style:none; }
table { border-collapse:collapse; table-layout:fixed; }
form, input, select, textarea { vertical-align:middle; }
summary::-webkit-details-marker { display:none; }

/* ===== タグ定義 ===== */
* { box-sizing:border-box; }
html, body, input { color:#000000; font-size:16px; font-weight:400; line-height:1.6; }
body, textarea, input { font-family:'Noto Sans JP', sans-serif; }
body { width:100%; margin:0 auto; -webkit-text-size-adjust:none; }
a { background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0.5); }
a { text-decoration:none; outline:none; color:#000000; }
@media (any-hover:hover) { a:hover { opacity:0.5; } }
main h2 { display:flex; justify-content:center; text-align:center; }
main a { color:#196aab; }
section { padding-top:50px; padding-bottom:50px; }
section+section { border-top:1px solid #cccccc; }
h2 { font-size:1.6rem; margin-bottom:1.6rem; font-weight:700; }
h3 { font-size:1.2rem; margin-bottom:1.2rem; }
h4 { font-size:1.1rem; margin-bottom:1.1rem; }
p { margin-bottom:0.5rem; }
p:last-child { margin-bottom:0; }
table { border:1px solid #555555; margin-left:auto; margin-right:auto; }
th { padding:0.25rem 2rem; vertical-align:middle; border:1px solid #555555; white-space:nowrap; background-color:#072e4d; color:#ffffff; font-weight:400; }
td { padding:0.25rem 2rem; vertical-align:middle; border:1px solid #555555; text-align:left; }
input[type="text"], input[type="email"], input[type="password"], textarea { border:1px solid #cccccc; background-color:#ffffff; padding:5px; }
input[type="checkbox"] { border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input[type="checkbox"] { position:relative; width:24px; height:24px; border:1px solid #cccccc; vertical-align:-8px; }
input[type="checkbox"]:checked:before { position:absolute; top:1px; left:6px; transform:rotate(40deg); width:8px; height:12px; border-right:3px solid #000000; border-bottom:3px solid #000000; content:''; }
textarea { height:10rem; }
img { display:block; max-width:100%; }
img+p { margin-top:1rem; }
br { line-height:1; }
details { transition:.5s; }
summary { cursor:pointer; list-style:none; }
summary::before { content:"＋"; font-weight:700; }
details[open]>summary::before { content:"－"; }
hr { border:1px solid #cccccc; }

/* ===== ヘッダ・ナビ ===== */
header { padding-top:20px; padding-bottom:20px; display:flex; justify-content:space-between; align-items:center; column-gap:25px; }
.header_left { display:flex; justify-content:space-between; column-gap:25px; }
.header_left img { height:70px; }
header a { display:block; }
.header_name { column-gap:1rem; }
.header_title { font-weight:700; }
.header_title_jp { font-size:1.5rem; line-height:1; margin-bottom:0.5rem; }
.header_title_en { font-size:1.2rem; max-width:630px; }
.header_right { display:flex; column-gap:10px; align-items:center; flex-shrink:0; }
.header_lang { display:flex; column-gap:1rem; }
.header_lang a { color:#196aab; }
.header_shaki { font-size:1.2rem; font-weight:700; background-color:#196aab; color:#ffffff; padding:0 20px; height:60px; border-radius:5px; }
@media (any-hover:hover) { .header_shaki:hover { opacity:unset; background-color:#ffcd00; color:#000000; } }

nav { background-color:#072e4d; display:flex; align-content:start; justify-content:center; }
.nav_menu { display:flex; justify-content:space-between; align-items:start; align-content:start; flex-wrap:wrap; column-gap:1px; row-gap:1px; margin-top:5px; margin-bottom:5px; }
.nav_menu li { display:block; flex:1; flex-basis:calc(calc(100% - 7px) / 8); height:50px; background-color:#196aab; }
.nav_menu li a:hover { background-color:#ffcd00; opacity:unset; }
.nav_menu li a:hover p { color:#000000; }
.nav_menu li a, .nav_menu li.nav_select { display:flex; justify-content:center; align-items:center; padding:0 5px; }
.nav_menu li a { height:100%; }
.nav_menu li a p { border-bottom:0; color:#ffffff; text-align:center; line-height:1.3; font-weight:700; }
.nav_menu li a.nav_en p { font-size:14px; }
.nav_menu li .nav_select { background-color:#ffcd00; }
.nav_menu li .nav_select p { color:#000000; }
.nav_sp { display:none; }

.tab_choice { display:flex; column-gap:1px; background-color:unset; }
.tab_choice>div { flex:1; color:#ffffff; background-color:#196aab; text-align:center; display:flex; align-items:center; justify-content:center; }
.tab_choice>div.active { background-color:#ffcd00; color:#000000; }
.tab_choice>div:hover { cursor:pointer; background-color:#ffcd00; color:#000000; }
.tab_choice p { padding-top:1rem; padding-bottom:1rem; font-size:1.15rem; line-height:1.25; font-weight:700; }
div.tab { display:none; padding-top:50px; }
div.tab.active { display:block; }

/* ----- スマホメニューボタン ----- */
.sp_menu_button { display:none; width:50px; height:60px; position:relative; flex-shrink:0; }
.sp_menu_button div { height:36px; }
.sp_menu_button span { display:inline-block; transition:all .4s; position:absolute; left:0; width:50px; height:4px; background-color:#196aab; border-radius:2px; }
.sp_menu_button span:nth-of-type(1) { top:8px; }
.sp_menu_button span:nth-of-type(2) { top:24px; }
.sp_menu_button.nav_active span:nth-of-type(1) { -webkit-transform:translateY(8px) rotate(-45deg); transform:translateY(8px) rotate(-45deg); }
.sp_menu_button.nav_active span:nth-of-type(2) { -webkit-transform:translateY(-8px) rotate(45deg); transform:translateY(-8px) rotate(45deg); }
.sp_menu_button p { font-size:0.85rem; line-height:1; font-weight:700; color:#196aab; text-align:center; margin-top:5px; }

/* ===== フッタ ===== */
footer { margin-top:50px; }
.footer_test_guide { background-color:#c63527; color:#ffffff; padding-top:2rem; padding-bottom:2rem; text-align:center; }
.footer_nav { background-color:#072e4d; padding-top:50px; padding-bottom:50px; }
.footer_nav .inner { display:flex; justify-content:center; flex-wrap:wrap; column-gap:50px; row-gap:25px; }
.footer_nav .inner:first-child { margin-bottom:50px; }
.footer_nav ul { display:flex; justify-content:center; flex-wrap:wrap; column-gap:50px; row-gap:25px; }
footer a { color:#ffffff; }
.footer_bottom { padding-top:50px; padding-bottom:150px; background-color:#3a3a3a; color:#ffffff; }
.footer_name { margin-bottom:1rem; }
.copyright { text-align:center; font-size:0.75rem; }

/* ===== ページトップへの戻り ===== */
.go_to_top { display:block; position:fixed; bottom:50px; right:50px; width:60px; height:60px; background-color:#196aab; color:#ffffff; font-size:36px; font-weight:700; line-height:60px; text-align:center; z-index:10; text-decoration:none; }
@media (any-hover:hover) { .go_to_top:hover { background-color:#ffcd00; color:#000000; cursor:pointer; } }

/* ===== ページ共通 ===== */
/* ----- ブロック系 ----- */
.inner { width:1080px; margin-left:auto; margin-right:auto; }
.flex_left   { display:flex; }
.flex_center { display:flex; justify-content:center; }
.flex_separate { display:flex; justify-content:space-between; }
.flex_right  { display:flex; justify-content:flex-end; }
.flex_middle { align-items:center; }
.table_x { overflow-x:scroll; }
.table_x table { white-space:nowrap; }
.buttons { display:flex; justify-content:center; column-gap:25px; }
.buttons:not(:first-child) { margin-top:50px; }
.button, a.button, input[type="submit"] { display:block; width:250px; height:50px; line-height:50px; background-color:#196aab; color:#ffffff; font-weight:700; text-align:center; cursor:pointer; }
@media (any-hover:hover) { .button:hover, a.button:hover, input[type="submit"]:hover { opacity:unset; background-color:#ffcd00; color:#000000; } }
.fade { opacity:0; }
.slide_in { transition:transform 1.5s; }
.slide_left  { transform:translateX(calc(-40vw - 0%)); }
.slide_right { transform:translateX(calc( 40vw + 0%)); }
.slide_up    { transform:translateY(20vh); }
.slide_finish   { transform:translateX(0) translateY(0); }
img.center { margin-left:auto; margin-right:auto; }
img.right  { margin-left:auto; margin-right:0; }
.page_top, .subpage_top { position:relative; }
.page_top>div, .subpage_top>div { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:start; align-items:center; }
.subpage_top img { height:20vw; min-height:150px; }
.youtube_movie_wrapper { aspect-ratio:16 / 9; }
.youtube_movie_wrapper iframe { width:100%; height:100%; }
.error_page { padding-top:150px ; padding-bottom:250px; text-align:center; font-size:2rem; color:#ff0000; }
.error_message { margin-top:1rem; margin-bottom:1rem; color:#ff0000; text-align:center; }
.information_blocks { display:flex; justify-content:start; flex-wrap:wrap; column-gap:25px; row-gap:25px; }
.information_blocks a { display:block; width:calc(calc(100% - 75px) / 4); background-color:#f1f5f9; color:#000000; border-radius:20px; padding:10px; }
.information_blocks h3 { font-size:1.05rem; margin-bottom:0; }
.information_image { aspect-ratio:4 / 3; margin-bottom:10px; border-radius:10px ; }
.information_image img { object-fit:cover; aspect-ratio:4 / 3; width:100%; }
.information_detail_body p { min-height:1em; }
.information_body_images a { display: inline-block; line-height: 0; }
.short_page_wrap { margin-top:50px; margin-bottom:50px; }

/* ----- テキスト系 ----- */
.serif { font-family:"Noto Serif JP", serif; }
.error { color:#ff0000; }
.indent { text-indent:1em; }
.left   { text-align:left; }
.center { text-align:center; }
.right  { text-align:right; }
a.outlink::after { content:url('images/common_outlink_black.png'); margin-left:5px; }
.object_fit { display:block; object-fit:cover; width:100%; }
.nobr { white-space:nowrap; display:inline-block; }
.under_construction { margin:100px 0; font-size:48px; text-align:center; }
.subpage_top h1 { color:#ffffff; font-size:2rem; }
.subpage_top h1 { text-shadow:0 0 0.1rem #000000, 0 0 0.2rem #000000, 0 0 0.4rem #000000, 0 0 0.8rem #000000; }
h2 span.small { font-size:1rem; margin-left:1rem; }
.f_req:after, .f_opt:after { margin-left:5px; display:inline-block; border-radius:3px; color:#ffffff; padding:0 5px; }
.f_req:after { background:#c63527; }
.f_opt:after { background:#ffffff; }
.f_req:after    { content:'必須'; }
.f_req.en:after { content:'Required'; }
.f_opt:after    { content:'任意'; }
.f_opt.en:after { content:'Optional'; }
.decimal { list-style-type:decimal; list-style-position:inside; }
.decimal li { text-indent:-1em; padding-left:1em; }
.decimal li:not(:last-child) { margin-bottom:1em; }
.message p { border:1px solid #ff0000; padding:1rem 2rem; color:#ff0000; }
ul.disc { list-style-type:disc; list-style-position:inside; }
ul.disc li { margin-left:1em; text-indent:-1em; }
.asterisk { margin-left:1.5rem; text-indent:-1.5rem;}
.asterisk::before { content:'※';  margin-right:0.5rem; }

/* ===== ページ別定義 ===== */
/* ----- ログインページ ----- */
.login td { padding:5px; max-width:calc(100vw - 192px); }
.login input { max-width:100%; }

/* ----- TOPページ ----- */
.top_mainvisual { height:calc(100vh - 170px); }
.top_mainvisual img { position:absolute; width:100%; height:calc(100vh - 170px); opacity:0; transition:opacity 2s ease-in-out; }
.top_mainvisual img.active { opacity:1; }
.top_announce { display:flex; justify-content:space-between; flex-wrap:wrap; column-gap:25px; row-gap:25px; }
.top_announce>a { display:block; width:calc(calc(100% - 25px) / 2); background-color:#f1f5f9; color:#000000; border-radius:25px; padding:25px; }

/* ----- 会長挨拶ページ ----- */
.message_text { margin-top:2rem; margin-bottom:2rem; }

/* ----- 会則ページ ----- */
.regulation, .regulation tr, .regulation th, .regulation td { border:0; }
.regulation th { background-color:unset; text-align:left; font-weight:400; vertical-align:top; padding:0.2rem 1rem 0.2rem 0; color:#000000; }
.regulation tr:not(:first-child) .regulation_chapter { padding-top:1rem; }
.regulation td { padding:0.2rem 0 0.2rem 0; }
.regulation dt { font-weight:700; }
.regulation dt:not(:first-child) { margin-top:1rem; }

/* ----- 役員ページ ----- */
.board_en th, .board_en td { padding:0.25rem 1rem; }

/* ----- 事務局からページ ----- */
.information_detail_header { background-color:#196aab; color:#ffffff; padding:25px; }
.information_detail_header h2 { text-align:left; display:block; margin-bottom:0; font-size:1.4rem; }
.information_detail_body { padding:25px; background-color:#f1f5f9; min-height:200px; }
.information_detail_body img { margin-top:25px; }

/* ----- 年会費・名簿ページ ----- */
.fee_top_attension { background-color:#072e4d; color:#ffffff; font-size:1.5rem; padding-top:0.5rem; padding-bottom:0.5rem; }
.fee_top_lead { margin-top:25px; flex-wrap:wrap; column-gap:25px; row-gap:10px; }
.fee_top_lead img { margin-top:1rem; }
.fee_detail h3 { border-left:5px solid #000000; padding-left:10px; line-height:1.3; }
.fee_detail h3:not(:first-child) { margin-top:2rem; }
.fee_block { margin-left:1rem; background-color:#f1f5f9; padding:1rem; }
.fee_block:not(:last-child) { margin-bottom:10px; }
.fee_detail ul.disc li { margin-left:2rem; }
.fee_paypal { text-indent:0; margin-left:0; display:flex; justify-content:center; margin-top:10px; margin-bottom:10px; }
.fee_paypal form { text-align:center; }
.fee_paypal table, .fee_paypal table * { border:0; text-align:center; }
.fee_paypal select { border:1px solid #000000; background-color:#ffffff; padding:5px; }
.fee_attension { font-size:1.1rem; color:#ff0000; }
.fee_office { margin-top:1rem; padding:1rem 2rem; border:1px solid #cccccc; background-color:#ffffff; }

/* ----- 会報ページ ----- */
.newsletter_list { display:flex; justify-content:start; flex-wrap:wrap; column-gap:100px; row-gap:50px; }

/* ----- メールニュースページ ----- */
.mailnews { display:flex; justify-content:start; flex-wrap:wrap; column-gap:50px; row-gap:1rem; align-items:start; }
.mailnews_list_wrapper { background-color:#f1f5f9; padding:0.5rem; flex:0 1 calc(50% - 25px); min-width:200px; }
.mailnews_list li { list-style-type:disc; margin-left:1.5rem; color:#000000; }

/* ----- 先輩の声ページ ----- */
.voices_list { display:flex; justify-content:start; flex-wrap:wrap; column-gap:50px; row-gap:25px; }
.voices_list li { flex-basis:calc(calc(100% - 100px) / 3); }
.voices_detail img { margin:10px 0; }

/* ----- 表彰ページ ----- */
.award_block:not(:last-child) { margin-bottom:25px; }
.award_block h3 { margin-bottom:0.25rem; }
.award_block .table_x { overflow-x:unset; }
.award_block table { width:100%; table-layout:fixed; white-space:unset; }
.award_block td { padding:2px 5px; line-height:1.3; }
.award_block td:first-child { width:200px; }

/* ----- ホストファミリープログラムページ ----- */
.host_top { font-size:22px; margin-bottom:5rem; }

/* ----- 協賛企業ページ ----- */
.sponsors_list { display:flex; justify-content:start; flex-wrap:wrap; column-gap:50px; row-gap:25px; }
.sponsors_list li { flex-basis:calc(calc(100% - 50px) / 2); border:1px solid #196aab; }
.sponsors_list li a { text-align:center; color:#196aab; display:flex; justify-content:center; align-items:center; height:75px; gap:1.5rem; font-weight:900; }
.sponsors_list li img { max-width:75%; max-height:50px; }
.sponsors_list li img+p { margin-top:unset; }
.sponsors_list li p { font-size:20px; }

/* ----- リンク集ページ ----- */
.links_list_wrapper { display:flex; justify-content:center; }
.links_list { display:flex; flex-wrap:wrap; row-gap:25px; column-gap:25px; }
.links_list li { display:block; flex:1 0 527px; background-color:#f1f5f9; border-radius:10px; }
.links_list li a { display:flex; padding:10px; column-gap:1rem; align-items:center; }
.links_list li img { width:150px; border-radius:10px; aspect-ratio:calc(1080 / 810); object-fit:cover; }

/*■■■■■■■■■■■■■■■■■■■■■■■■■
  タブレット大（メニュー変更）
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:1100px) {

/* ===== タグ定義 ===== */
th { padding:0.25rem 1rem; }
td { padding:0.25rem 1rem; }

/* ===== ヘッダ・ナビ ===== */
header { display:block; }
.header_right { justify-content:center; margin-top:20px; }
.sp_menu_button { display:block; }
.fixed { height:100%; position:fixed; }
nav { display:none; position:fixed; z-index:2; width:100%; top:110px; left:0; overflow-y:scroll; height:calc(100% - 110px); }
.nav_menu { margin:0; width:100%; overflow-y:scroll; }
.nav_menu li { height:60px; flex-basis:calc(calc(100% - 1px) / 2); }

/* ===== ページ共通 ===== */
/* ----- ブロック系 ----- */
.inner:not(.nav_menu) { width:unset; margin-left:10px; margin-right:10px; }

/* ----- テキスト系 ----- */
main h1 { font-size:32px; padding:25px 0; }

/* ===== ページトップへの戻り ===== */
.go_to_top { right:10px; bottom:25px; }

/* ===== ページ別定義 ===== */
/* ----- TOPページ ----- */
.top_mainvisual, .top_mainvisual img { height:360px; }

/* ----- 会報ページ ----- */
.newsletter_list li { column-gap:50px; }

/* ----- 協賛企業ページ ----- */
.sponsors_list { column-gap:25px; }
.sponsors_list li { flex-basis:calc(calc(100% - 25px) / 2); }

/* ----- リンク集ページ ----- */
.links_list { row-gap:10px; column-gap:25px; }
.links_list li { flex-basis:100%; }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット小
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:800px) {

/* ===== タグ定義 ===== */
h2 { font-size:1.4rem; }
th { padding:0.25rem 0.5rem; }
td { padding:0.25rem 0.5rem; }

/* ===== ヘッダ・ナビ ===== */
.header_title_en { font-size:1rem; max-width:520px; }

/* ===== フッタ ===== */

/* ===== ページ共通 ===== */
/* ----- ブロック系 ----- */
.page_top img { height:300px; }
.information_blocks a { width:calc(calc(100% - 25px) / 2); }

/* ----- テキスト系 ----- */
.subpage_top h1 { font-size:1.7rem; }

/* ===== ページ別定義 ===== */
/* ----- TOPページ ----- */
.top_announce>a { width:calc(calc(100% - 25px) / 2); padding:10px; }

/* ----- メールニュースページ ----- */
.mailnews_list_wrapper { flex:1 1 100%; }

/* ----- 先輩の声ページ ----- */
.voices_list { column-gap:25px; }
.voices_list li { flex-basis:calc(calc(100% - 25px) / 2); }

/* ----- ホストファミリープログラムページ ----- */
.host_top { font-size:18px; margin-bottom:5rem; }
.host_sub { font-size:16px; }

}

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  スマホ大
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:640px) {

/* ===== タグ定義 ===== */
h2 { font-size:1.25rem; }
h3 { font-size:1.1rem; }
h4 { font-size:1.05rem; }

/* ===== ヘッダ・ナビ ===== */
.header_title_jp { font-size:1.3rem; }
.header_title_en {  max-width:270px; }

/* ===== フッタ ===== */

/* ===== ページ共通 ===== */
/* ----- ブロック系 ----- */

/* ----- テキスト系 ----- */
.subpage_top h1 { font-size:1.4rem; }

/* ===== ページトップへの戻り ===== */

/* ===== ページ別定義 ===== */

/* ----- 年会費・名簿ページ ----- */
.fee_top_attension { font-size:1.15rem; }
.fee_attension { font-size:1.05rem; }
.fee_block { margin-left:0.5rem; padding:0.5rem; }
.fee_detail ul.disc li { margin-left:1rem; }

/* ----- 会報ページ ----- */
.newsletter_list li { column-gap:25px; }

/* ----- 表彰ページ ----- */
.award_block .table_x { overflow-x:scroll; }
div:not(#tab3) .award_block table { white-space:nowrap; width:auto; }

/* ----- 協賛企業ページ ----- */
.sponsors_list_wrapper { display:flex; justify-content:center; }
.sponsors_list { display:block; }
.sponsors_list li { display:block; }
.sponsors_list li:not(:last-child) { margin-bottom:10px; }
.sponsors_list li p { font-size:20px; }

/* ----- お問い合わせページ ----- */
.inquiry table, .inquiry tbody, .inquiry tr, .inquiry th, .inquiry td { display:block; }
.inquiry th { text-align:left; padding-bottom:0; }
.inquiry td { width:100%; padding-left:0; }
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  スマホ小
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:480px) {

/* ===== タグ定義 ===== */
h3 { font-size:1.15rem; }

/* ===== ヘッダ・ナビ ===== */
.header_left { column-gap:10px; }
.header_name { column-gap:0.5rem; }
.header_title_jp { font-size:1.2rem; }
.header_title_en { font-size:0.85rem; }
.header_right { margin-top:10px; }
.header_shaki { height:50px; font-size:1.1em; }
nav { height:calc(100vh - 105px); top:105px; }
.tab_choice p { padding-top:0.5rem; padding-bottom:0.5rem; font-size:1.1rem; }

/* ===== フッタ ===== */

/* ===== ページ共通 ===== */
/* ----- ブロック系 ----- */
.buttons:not(:first-child) { margin-top:25px; }
.button, a.button, input[type="submit"] { width:200px; }
.information_blocks { column-gap:10px; row-gap:10px; }
.information_blocks a { width:100%; display:flex; column-gap:10px; align-items:start; border-radius:10px; }
.information_image { width:100px; flex-shrink:0; border-radius:10px; margin-bottom:0; }

/* ----- テキスト系 ----- */

/* ===== ページトップへの戻り ===== */

/* ===== ページ別定義 ===== */
/* ----- TOPページ ----- */
.top_announce>a { width:100%; padding:10px; border-radius:10px; }

/* ----- 事務局からページ ----- */
.information_detail_header { padding:10px; }
.information_detail_body { padding:10px; }
.information_detail_body img { margin-top:10px; }

/* ----- 会報ページ ----- */

/* ----- メールニュースページ ----- */

/* ----- 先輩の声ページ ----- */
.voices_list_wrapper { display:flex; justify-content:center; }
.voices_list { display:block; }
.voices_list li { display:block; }
.voices_list li:not(:last-child) { margin-bottom:10px; }

/* ----- 表彰ページ ----- */

/* ----- 研究室等リンク週ページ ----- */
..links_list li { border-radius:5px; }
.links_list li a { padding:5px; column-gap:0.5rem; }
.links_list li img { width:100px; }

/* ----- お問い合わせページ ----- */
}