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

.pcNone{ display:none;}
.spNone{ display:block;}
.dispFlex{display: flex;}
.j-cont-sb{-webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.j-cont-c {
    justify-content: center;
}


#wrap{width:auto}
#breadcrumbArea {
    padding: 20px 0;
    width: 960px;
    max-width: 95%;
    margin: 0 auto;
}

.mt{margin-top:-6px;}
.mt2{margin-top:-10px;}
.mt3{margin-top:18px;}
/*----------------------------------------------------------------------------
***                                                             Header
----------------------------------------------------------------------------*/
#headerArea {}
#headerAreaInner {}
#headerAreaLogo {}
#headerTxt{}

#headerTitle{display: flex;padding-top: 0;height: 56px;}
#headerArea h1{position: inherit;margin: 0;}
#headerAreaInner {width:960px;margin:0 auto;position:relative;/* max-width: 98%; */}
#headerTitle{float: inherit;height: auto;flex-wrap: wrap;/* width: 960px; *//* max-width: 95%; *//* align-content: center; */}
h1{ font-size:10px; font-weight:normal; margin:20px 0 5px 0; line-height:1.2em;}

#headerTxt{float: inherit;width: auto;display: flex;gap: 1em;align-items: center;}
#headerTxt p{margin: 0;}



#headerArea{width:100%;margin:0 auto;padding: 0;}
#headerArea #headerAreaTxt {
    background: #EF8346;
    padding: 0.4em 0;
}
#headerArea #headerAreaTxt h1{
    color: #fff;
    width: 960px;
    max-width: 95%;
    margin: auto;
}

#headerArea #headerAreaInner {width: 100%;margin:0 auto;width: 960px;max-width: 95%;margin: 1em auto;}
#headerArea h1 {}
#headerArea h1 img {}
#headerArea h1 span {
	font-size: 80%;
	font-weight:normal;
}
#headerTitle p{}
#headerTitle p.school_biz {margin: 0;}
#headerTitle p img{aspect-ratio:7/40;max-width:200px;max-height:35px}
#headerArea .txt {}
#headerArea a {}
#headerArea a img {
    aspect-ratio: auto;
}
#sideMenu{display:block}


/*----------------------------------------------------------------------------
***                                                    　 mainsection
----------------------------------------------------------------------------*/
#formBox textarea{
    width: calc(100% - 1.5em - 2px);
    height: 150px;
    padding: 0.75em;
}

#formBox li {
 margin-top: 0em;
}

#formBox select,
#formBox input{
    padding: 1.2em;
    border-radius: 0.2rem;
    border: 1px solid #777;
    /* align-items: baseline; */
}
#formBox input.inputWide{display:block;width: calc(100% - 2.4em);max-width: 500px;}

.mainSection h3{
    border-left: none;
    padding-left: 0.1em;
    margin-bottom: 0;
    margin-top: 3em;
    padding-bottom: 0.25em;
}

.secBox > .sectionInner{width: 865px;margin:0 auto;padding:20px 0;}
.secBox .inSec{width:750px;margin:0 auto;}


.Lesson{display:inline-block; color:#00B1C5; text-align: center;width:24%;font-size:15px;font-weight:bold;line-height:3em;margin:0;}
.LessonTxt{color:#595757; font-size:18px;width:780px;margin:0 auto 25px;line-height:1.5em;}
.schoolBtn{margin-left:5px;}

/*----- mainImgSec -----*/
#mainImgSec{width:100%;margin:0 auto;background: url(../images/img_back_pc.png) no-repeat top center;}
#mainImgSec > .sectionInner{position:relative;}
#mainImgSec > .sectionInner > .titleBox{margin:0 auto;position:relative;width: 796px;}
#mainImgSec > .sectionInner:before{}
#mainImgSec > .sectionInner > .titleBox h2{margin-bottom: 15px;/* text-align: center; */font-weight: 300;position: reletive;margin-top: -20px;/* height: 140px; */padding-top: 10px;}
#mainImgSec > .sectionInner > .titleBox h2 .txt01{margin-bottom:0.5em;display: inline-block;}
#mainImgSec > .sectionInner > .titleBox h2 .txt02{margin-bottom: 0.2em;display: inline-block;}
#mainImgSec > .sectionInner > .titleBox h2 .txt03{display:block;font-weight: 500;font-size: 23px;color: #231815; line-height:1.2em; padding-top:0.2%; padding-bottom:1%;}
#mainImgSec > .sectionInner > .titleBox h2 .textL{font-size:30px;}
#mainImgSec > .sectionInner > .titleBox h2 .textS{font-size:28px;color:#23aec2;font-weight:500;margin-left: -20px;}
#mainImgSec > .sectionInner > .titleBox h2 .textLL{font-size: 42px;display: inline-block;line-height:1.2em;font-weight: 400;padding-top: 7px;}
#mainImgSec > .sectionInner > .titleBox h2 .textLL2{color:#e41277;}
#mainImgSec > .sectionInner > .titleBox h2 .location{
    font-size: 19px;
    color: #00b0c5;
    display: block;
    line-height: 1.2em;
}

#mainImgSec .titleBox .uasgi01{position: absolute;top: 85px;left: 120px;}
#mainImgSec .titleBox .schoolset{
	position: absolute;
	top: -1px;
	left: 619px;
}

#mainImgSec > .sectionInner > .titleBox p .txt01{font-size:38px; font-weight:bold; margin:0 0.2em;}
#mainImgSec > .sectionInner > .titleBox p .txt02{font-size:38px;}

#navSec{width:796px;margin: 0 auto;padding:2px 0px 20px 2px;background: #fff;bottom: -50%;box-shadow: 0px 0px 10px 0px #999999;position:relative;}
#navSec .titleBox{margin-bottom:20px;}
#navSec .titleBox .txtBox{padding-left:25px;}

#navSec .txtBox h3{font-size:30px;font-weight:600;line-height:1;text-align:center;}
#navSec .txtBox p{font-size:18px;text-align:center;line-height:1.3em;font-weight:100;padding-top:10px;}
#navSec .txtBox p span{color:#e41277;font-size: 150%;line-height: 1.5em;}
#navSec .logoBox{margin-right: 20px;padding-right: 20px;border-right:3px solid #969696;}
#navSec #nav{text-align:center;}
#navSec #nav ul{display:inline-block;}
#navSec #nav li{float:left;margin-right: 10px;}
#navSec #nav li:last-child{margin-right:0;}

#navSec .usagi02{position:absolute; top:240px; left:15px;}
#navSec .usagi03{position:absolute;top: 318px;left:710px;}
#navSec .usagi04{position:absolute; top:240px; left:0px;}


#navSec #point{text-align:center;padding:20px 0px;}
#navSec #point ul{ display:inline-block;}
#navSec #point ul li{width: 167px;height: 60px;background-color: #00b0c5;float:left;margin-right:5px;}
#navSec #point ul li p{text-align: center;color: #FFF;font-size: 25px;padding-top: 5px;}

h3 {
  border-bottom: solid 3px;
  border-image: linear-gradient(90deg, #ef8346 25%, #2d5c74 25%);
  border-image-slice: 1;
  position: relative;
  margin-top: 5rem;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 600;
}



/* お名前 */
#nameInput{}
#nameInput dd{
    display: inline-flex;
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 0.5em;
}



.formitemtitle,
#formTb dl .formitem_2,
#formTb dl .formitem{font-size: 1.1rem;font-weight: normal;line-height: 1.4;margin: 2.5em auto 0.75em;padding-left: 4.5rem;position: relative;font-family: 'Noto Sans JP';/* margin-top: 2em; */}

.receptionStatus {
    padding: 1em 0;
    font-size: clamp(12px, 3.6vw, 14px);
    gap: .25em 3%;
}


.radio-select .radiobtnbox{flex-wrap: wrap;gap: 0.5em 2%;}

#formTb .formitem::before,
#formTb .formitem_2::before,
#formTb .formitemtitle::before {
    content: '必須';
    color: #fff;
    font-size: 80%;
    margin-right: 1rem;
    position: absolute;
    display: table;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    text-align: center;
    width: 4rem;
    padding: 0.4em 0em;
    border-radius: 3px;
}
#formTb .formitem::before,
#formTb .formitemtitle::before{background-color: #EF8346;}
#formTb .formitem_2::before{background-color: #A5C2CE;}



#formTb select {/* height: 45.97px; */}
#formTb #confBtnBox{margin-top:4%;text-align: center;width: 60%;margin: auto;}
#formTb #confBtnBox #submit-area{margin: 5% 0 5%;}
#formTb #confBtnBox #submit-area button{
    padding: 0.1em 1.5em;
    background: #EF8346;
    border-radius: 0.4em;
    transition: all .3s;
    text-decoration: none;
    display: block;
    color: #fff;
    font-weight: 500;
    border: none;
    border-bottom: solid 7px #C34A14;
    font-size: 29px;
    width: 100%;
    }








label {
    cursor: default;
}

.radiobtnbox {
    display: flex;
    flex-wrap: wrap;
}

.radiobtnbox dd {
    width: calc(49% - 0.2rem);
    border: 0.1rem solid #2D5C74;
    border-radius: 0.5rem;
    overflow:hidden;
    align-content: center;
}

.radiobtnbox label{
    position: relative;
    display: block;
    align-items: center;
    align-content: flex-start;
    line-height: 1.4;
    justify-content: center;
    text-align: center;
    padding: 0.75em 2.5%;
    /* margin-bottom: 2%; */
    font-size: 1.2em;
    cursor: pointer;
    height: -webkit-fill-available;
    align-content: center;
}
.radiobtnbox input {
    display: none;
}
.radiobtnbox label span {
    color: #2D5C74;
}

.radiobtnbox label:has(input:checked){
    background-color: #2D5C74;    
}
.radiobtnbox label:has(input:checked) span{color: #fff;}

.radiobtnbox label .icon_aus::before {
    background-image: url(../images/icon_aus.png);
}
.radiobtnbox label .icon_nzl::before {
    background-image: url(../images/icon_nzl.png);
}
.radiobtnbox label .icon_canada::before {
    background-image: url(../images/icon_canada.png);
}
.radiobtnbox label .icon_usa::before {
    background-image: url(../images/icon_usa.png);
}
.radiobtnbox label .icon_gbr::before {
    background-image: url(../images/icon_gbr.png);
}
.radiobtnbox label .icon_irl::before {
    background-image: url(../images/icon_irl.png);
}
.radiobtnbox label .icon_mlt::before {
    background-image: url(../images/icon_mlt.png);
}
.radiobtnbox label .icon_phl::before {
    background-image: url(../images/icon_phl.png);
}
.radiobtnbox label .icon_kor::before {
    background-image: url(../images/icon_kor.png);
}
.radiobtnbox label .countryflex{justify-content: start;padding: 0 0.6em 0 calc(0.6em + 32px);text-align: left;/* position:relative; */display: block;}
.radiobtnbox label .countryflex::before {content: '';position: absolute;background-position: left;background-repeat: no-repeat;background-size: contain;display: inline-block;height: 22px;width: 22px;top: 0;bottom: 0;margin: auto;left: 6%;border: 2px solid #fff;border-radius: 15px;}


#departInput .depart_toggle{
    display: flex;
    padding: 1em;
    background-color: #F7F7F7;
    align-items: center;
    margin-top: 1em;
}
#departInput .depart_toggle div{}
#departInput .depart_toggle .depart_select_wrap{}
#departInput .depart_toggle div select{
    height: 54.8px;
    padding: 0px 16px;
    font-size: 16px;
}
#departInput .depart_toggle label{margin: 0 0.5em;}

/* CSSコード */
.hidden {
    display: none; 
}


.txtSizeL{
    font-family: 'Noto Sans JP';
    font-size: 0.86em;
    margin-bottom: 1em;
    font-size: clamp(14px, 1.8vw, 16px);
}

.telcall{
    margin-top: 1em;
    background-color: #DAEAEF;
    width: 85%;
    margin: 1em auto 0px;
    padding: 1em;
    border-radius: 5px;
}
.telcall .telcall-btn{
    text-align: center;
    font-weight: bold;
    font-family: 'Noto Sans JP';
    color: #2D5C74;
    font-size: 19px;
    /* margin-bottom: 1.2em; */
}
.telcall .open{}
.telcall div{}
.telcall div span{
    /* text-align: center; */
}
.telcall .tel-number{
    text-align: center;
    margin-top: 1.2em;
}
.telcall .tel-number a{
    color: #2D5C74;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fff;
    margin: 0px 0px;
    padding: 0px 30px;
}
.telcall .tel-number p{
    text-align: center;
    font-size: 12px;
    margin-top: 0.5em;
}

/* カウンセリングオプションのラジオボタンのラベル */
input[name="counseling_option"] + label {
    display: block; /* 強制的にブロック要素にする */
    margin-bottom: 5px; /* 必要に応じて上下の間隔を調整 */
}


.telcall-btn span{
    position: relative;
    /* padding-right: 25px; */
}

.telcall-btn span::before {
    content: "";
    position: absolute;
    width: 55px;
    height: 24px;
    background-image: url(../images/icon_tel.png);
    left: -3.8em;
    top: 0.1em;
    text-align: center;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 52px 24px;
}




.telcall-btn {
    position: relative;
    /* padding-right: 35px; */
}


.telcall-btn span::after{
    content: "";
    position: absolute;
    top: 41%;
    right: -44px;
    width: 13px;
    height: 13px;
    border-right: 2px solid #3f6f7d;
    border-bottom: 2px solid #3f6f7d;
    transform: translateY(-50%) rotate(45deg);
}












/*----------------------------------------------------------------------------
***                                                               カレンダー
----------------------------------------------------------------------------*/

/* --- 1. 全体レイアウトとフォント --- */
#calendar-container {
    /* max-width: 800px; */
    /* margin: 30px auto; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* border: 1px solid #ddd; */
    /* border-radius: 8px; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    /* background-color: #fff; */
}

/* --- 2. ヘッダーとナビゲーション --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0px;
    /* border-top-left-radius: 8px; */
    /* border-top-right-radius: 8px; */
}

.header h2 {
    margin: 0;
    font-size: 1.3em;
    color: #333;
    font-weight: 600;
}



/** ---------------------------------------------------- */
/* ★カレンダーナビゲーションボタンの最終統合CSS定義 */
/* ---------------------------------------------------- */
.weekChangeBtn{padding: 1em 0;}

.weekChangeBtn p {
    position: relative;
    border: none;
    border-radius: 0.5rem;
    background-color: #CBD1D3;
    color: #fff;
    cursor: #fffpointer;
    height: auto;
    text-align: center;
    line-height: 1;
    padding: 0.8em 30px;
    margin: 0;
    transition: background-color 0.2s, color 0.2s;
    font-size: 14px;
}

.weekChangeBtn #prev-week-btn,
.weekChangeBtn #next-week-btn {}
.weekChangeBtn #prev-week-btn:after,
.weekChangeBtn #next-week-btn:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform:rotate(-45deg);
}
.weekChangeBtn #prev-week-btn:after{left: 12px;transform:rotate(-225deg);}
.weekChangeBtn #next-week-btn:after{right: 12px;}

.weekChangeBtn #prev-week-btn[disabled],
.weekChangeBtn #next-week-btn[disabled] {
    cursor: not-allowed;
}

.weekChangeBtn #prev-week-btn.active,
.weekChangeBtn #next-week-btn.active {
    background-color: #2D5C74;
    color: #fff;
    opacity: 1;
    cursor: pointer;
}

/* ---------------------------------------------------- */







/* --- 3. ラジオボタン（オプション） --- */
.radio-options {
    padding: 8px 0px 10px;
    background-color: #fcfcfc;
    /* border-bottom: 1px solid #eee; */
    font-size: 0.95em;
}

.radio-options label {
    width: 70%;
    display: flex;
    gap: 2%;
    margin-right: 15px;
    font-size: 1.3em;
    cursor: pointer;
    align-items: baseline;
    /* padding-right: 1em; */
    /* margin-right: 1em; */
}

/* --- 4. テーブル (カレンダー本体) --- */
#schedule-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* カラム幅を均等に保つ */
}

.radio-options .radioContents {justify-content: space-between;padding: 9px 23px;border-bottom: dashed 1px #918787;align-items: center;}
.radio-options .radioContents .hiroshimaoffice{}
.radio-options .radioContents span.officeAttention{text-indent: -1em;font-size: 75%;color: #777;}

.radio-options a{
  position: relative;
  text-decoration: none;
  color: #f78d47;
  font-size: 0.9em;
  padding-right: 15px;
  }

.radio-options a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #f78d47;
    border-bottom: 1px solid #f78d47;
    transform: translateY(-50%) rotate(-45deg);
}

/* ヘッダー (日付と曜日) */
#schedule-table thead th {
    background-color: #EAEAEA;
    color: #333;
    font-weight: 600;
    padding: 4px 5px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 1.4;
    font-size: 12px;
    line-height: 1.8em;
}

/* 日付ヘッダー（<th>）のみに背景色を適用 */
#schedule-table thead th.day-sat {
    background-color: #D7E9F4; /* 土曜日: 水色 */
}

#schedule-table thead th.day-sun {
    background-color: #F4E3DF; /* 日曜日: ピンク/オレンジ系 */
}

/* 時間帯の選択セル（<td>）に色が残っている場合の対策 */
/* 予約可能なセルや残少セルの背景色を上書きして白に戻す（必要に応じて） */
#schedule-table tbody td {
    background-color: white; /* もしくは、デフォルトの背景色 */
}



/* 左端の時間表示セル */
#schedule-table tbody tr td:first-child {
    background-color: #EAEAEA;
    color: #555;
    font-weight: 500;
    text-align: center;
    padding: 5px;
    font-size: 15px;
    border: 1px solid #ddd;
    font-weight: bold;
}

/* 予約状況セル */
#schedule-table tbody tr td {
    text-align: center;
    padding: 1px;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: background-color 0.15s, transform 0.1s;
    /* height: 40px; */ /* セルの高さを固定 */
}

/* --- 5. ステータスと色分け --- */

/* 空席あり (○) */
.status-available {
    color: #FFB48F; /* 緑色 */
    background-color: #fff;
}

/* 残りわずか (△) */
.status-few {
    color: #EF8346; /* 黄色/オレンジ */
    background-color: #fff;
}

/* 受付終了/過去 (×) */
.status-closed {
    color: #918787; /* 赤色 */
    background-color: #fff;
    cursor: not-allowed;
}

/* 選択時のスタイル */
#schedule-table tbody tr td.selected {
    background-color: #EF8346;
    color: white;
    /* border: 3px solid #C34A14; */
    transform: scale(1.05);
}

/* ホバー時のスタイル (予約可能セルのみ) */
#schedule-table tbody tr td[data-status="available"]:hover,
#schedule-table tbody tr td[data-status="few"]:hover {
    background-color: #EF8346;
    opacity: 0.9;
    color: #fff;
}

/* --- 6. 特殊セル (お電話ください) --- */
.call-cell {
    background-color: #F7F7F7 !important;
    color: #555;
    font-size: 0.9em;
    padding: 5px !important;
    font-weight: normal;
    cursor: default !important;
}
.call-cell span {
    display: block; /* 縦書きの配置を調整 */
    /* height: 100%; */
    margin: auto;
    font-size: 19px;
}

/* --- 7. 凡例 (Legend) --- */
.legend {
    padding: 10px 20px;
    font-size: 0.9em;
    color: #555;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.legend p span {
    margin-right: 5px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

.legend .status-available {
    color: #FFB48F;
}
.legend .status-few {
    color: #FFB48F;
}
.legend .status-closed {
    color: #918787;
}
/*----- formSec -----*/
#formSec{
    margin-bottom: 0;
}
#formSec > .sectionInner{

max-width: 9;
}

#formSec #formTb{width: 600px;max-width: 95%;margin:0 auto;background: #f8f8f8;padding: 1.5em 0 4em;}
#formSec #formTb #formBox{/* background: #fff; *//* padding: 40px 107px; */margin-top: -26px;margin-bottom:10px;}
#formSec #formTb #inpost{
    width: 85%;
    margin: 2em auto;
    background: #fff;
    padding: 3%;
}

#formSec h2{margin-bottom:25px;}
#formSec h2 span{display:block; text-align:center; color:#fff; font-weight:normal;}
#formSec h2 .txt01{font-size:28px;}
#formSec h2 .txt02{font-size:34px;}


#formSec h2{font-size: 22px;font-weight: 500;line-height: 1;margin-bottom: 0;background-color: #2D5C74;/* height: 50px; */color: #FFF;padding: 26px 0px 26px 15px;text-align: center;}

#formSec .firstTxt{margin: 2em;font-weight: normal;/* font-size: 14px; */font-size: clamp(14px, 1.8vw, 16px);}
#formSec .redTxt{color: #ff2a2a;}

#formSec .nyBnr{width: 50%;text-align: center;max-width: 600px;margin: 0 auto;display: block;margin: -0.5em auto 0.5em;}
.privacy_check .txtSizeL{display: flex;align-items: center;justify-content: center;}
/*----------------------------------------------------------------------------
***                                                               form
----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------
***                                                             footer
----------------------------------------------------------------------------*/
#footerArea{/* background: #6A99AB; */}
#footerArea .boxTop{width: 865px;margin:0 auto;padding:45px 0;}

#addressBox{display:inline-block; padding-left:30px;}
#addressBox dl dt{display:inline-block; padding:0 5.5em; font-size:12px; color:#ffffff; background:#910782;}
#addressBox dl dd .txtTel{margin:1em 0;}
#addressBox dl dd .txt01{font-size: 1rem;}
#addressBox dl dd p{font-size:13px; line-height:1.5;}
#addressBox p{color:#e3e3e3;}
#addressBox p a{color:#e3e3e3;}
#copy{padding:10px 0;}
#copy p{color:#FFFFFF;}

@media screen and (min-width: 960px) {
  #copy p {
    width: 750px;
    margin: 0 auto;
  }
}

/*----------------------------------------------------------------------------
***                                                　　　　    thanks
----------------------------------------------------------------------------*/