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

body{min-width:1200px;}

/*----------------------------------------------------------------------------
 ***                                                              headerArea
----------------------------------------------------------------------------*/
#headerArea{width: 100%; background: #f2f2f2;box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); position: relative; z-index: 999;}
#headerArea #headerAreaInner{width: 100%; max-width: 1200px; height: 65px; display: flex;justify-content:space-between;align-items: center;padding: 0;margin: 0 auto;}
#headerArea #headerAreaInner .logoBox{margin-bottom: 0.5em;}
#headerArea #headerAreaInner .logoBox .imgOnlyLogo{display: none;}
#headerArea #headerAreaInner .rightMenuBox{margin: 0 0 0 auto;}
#headerArea #headerAreaInner .rightMenuUl{display: flex; justify-content:flex-end;}
#headerArea #headerAreaInner .rightMenuLi{padding: 0.6em 1em;}
#headerArea #headerAreaInner .rightMenuLi .snsBtn{background: #888;display: block;padding: 0.5em;border-radius: 50%;line-height: 1;}
#headerArea #headerAreaInner .rightMenuLi.twitter{padding-left: 0;}
#headerArea #headerAreaInner .rightMenuLi.login{padding: 0;}
#headerArea #headerAreaInner .rightMenuLi.login a{display: flex;justify-content: flex-start;align-items: center;background: #001b5b; padding: 0.6em 1em;}
#headerArea #headerAreaInner .rightMenuLi.login a:hover{text-decoration: none;}
#headerArea #headerAreaInner .rightMenuLi.login{height: 100% ;}
#headerArea #headerAreaInner .rightMenuLi.login .loginIcon{padding: 0.5em; line-height: 1; background: #f2f2f2; border-radius: 50%; margin-right: 1em;}
#headerArea #headerAreaInner .rightMenuLi.login .loginTxt{padding: 0;margin: 0;text-align: center;line-height: 1.1;color: #fff;}
#headerArea #headerAreaInner .rightMenuLi.login .mainTxt{font-size: 120%;}
#headerArea #headerAreaInner .rightMenuLi.login .subTxt{font-size: 85%;}

#headerArea #totp {position: fixed;bottom: 1em;right: 10px;z-index: 999;}


/*----------------------------------------------------------------------------
 ***                                                       underFirstViewSec
----------------------------------------------------------------------------*/
/*----- 【下層共通ファーストビュー】 -----*/
#underFirstViewSec{background-color:#f3f4f6;background-image:url(/correct/common_images/2024/bgi_fv01c.jpg);background-repeat:no-repeat;background-position:center center;background-size:cover;}
#underFirstViewSec #underFirstViewSecInner{position:relative;max-width:1200px;margin:0 auto;min-height:260px;padding:1em;}
#underFirstViewSec .underFirstViewContent{min-width: 700px;position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}
#underFirstViewSec .pageTtl{text-align: center;}
#underFirstViewSec .pageTtl img{transform: scale(.9)}
#underFirstViewSec .pageName{text-align: center; border: 2px solid #001b5b; color: #001b5b; font-weight: 600; padding: 0.5em; font-size: 130%; max-width:400px; margin: 0 auto; line-height: 1;}
#underFirstViewSec .pageName.member{background-color: #001b5b; color: #fff;}


/*----------------------------------------------------------------------------
 ***                                                                  navBox
----------------------------------------------------------------------------*/
#navBox{width: 100%;background: linear-gradient(to bottom, #b3b3b3 4px, transparent 4px); border-bottom: 1px solid #b3b3b3;}
#navBox .navBoxInner{width: 1200px;margin:0 auto;}
#navBox .navBtnUl{display: flex;justify-content:space-between; font-weight: 600;}
#navBox .navBtn{width: calc(100% / 8); border-top: 4px solid #001b5b; border-right: 1px solid #ccc; border-left: 1px solid #ccc; font-size: 110%;}
#navBox .navBtn:first-child{border-left: none;}
#navBox .navBtn:last-child{border-right: none;}
#navBox .navBtn.diary{border-top: 4px solid #561866;}
#navBox .navBtn.kiso{border-top: 4px solid #115628;}
#navBox .navBtn.diaryKr{border-top: 4px solid #750000;}
#navBox .navBtn.form{border-top: 4px solid #b40044; background-color:#f7e5ec;}
#navBox .navBtn a{display: block; width: 100%; padding: 1em; text-align: center; color:#4d4d4d; transition: background-color 0.3s ease;}
#navBox .navBtn a:hover{text-decoration: none; background-color:#f2f6ff;}
#navBox .navBtn.diary a:hover{color: #561866; background-color:#f8f5f8;}
#navBox .navBtn.kiso a:hover{color: #115628; background-color:#f4f7f6;}
#navBox .navBtn.diaryKr a:hover{color: #750000; background-color:#faf6f6;}
#navBox .navBtn.faq a{font-family: 'Noto Sans JP';}
#navBox .navBtn.form a{color: #b40044;}
#navBox .navBtn.form a:hover{ background-color:#f2cbda;}

/*----------------------------------------------------------------------------
 ***                                                            mainContents
----------------------------------------------------------------------------*/
#mainContents,
#mainContentsInner{width: 100%;}


/*----------------------------------------------------------------------------
 ***                                                          breadcrumbArea
----------------------------------------------------------------------------*/
#breadcrumbArea{width:calc(1050px + 4em);margin:0 auto; padding: 1em;}
#breadcrumbArea li{float: left;font-size: 80%;}
#breadcrumbArea li a{color: #001b5b; text-decoration:underline;transition:opacity .3s ease;}
#breadcrumbArea li a:hover{opacity:.7;}
#breadcrumbArea li:after{content: "＞";display: inline-block;color:#ccc;padding: 0 0.5em;}
#breadcrumbArea li:last-child:after{display: none;}


/*----------------------------------------------------------------------------
***                                                             contentsArea
----------------------------------------------------------------------------*/
/*----- 【全体設定】 -----*/
.secBox > .sectionInner{width: 1050px;margin:0 auto;padding: 4em 0;}

/*----- 【タイトル】 -----*/
.titleBox{margin-bottom: 3em;}
.titleBox .secTtl{font-size: 230%; position: relative;}
.titleBox.underPen .secTtl{margin-bottom:2em;}
.titleBox.underPen .secTtl:after{content: "";width: 140px;height: 30px;background: url("/correct/images/top2024/img_contents01.png");background-repeat: no-repeat;background-position: top center;background-size: cover;position: absolute;bottom: -0.1em;left: 50%;transform: translate(-50%, 100%);}
.titleBox p{padding:0;}
.navyTitleBox{margin-bottom: 3em; padding:1em 1em 1em 3.5em;position: relative; background-color: #001b5b;border-radius: 0.5em;}
.navyTitleBox:before{content:""; display: block; width:0;height:0;border-style:solid;border-width: 0.7em 0 0.7em 1em;
border-color: transparent transparent transparent #ff0; position: absolute; top:50%; left:1.5em; transform: translateY(-50%);}
.navyTitleBox .secTtl{font-size: 150%; font-weight: 600; color:#fff;}


/*----------------------------------------------------------------------------
 ***                                                               kiyakuBox
----------------------------------------------------------------------------*/
/*----- 【ご利用規約】 -----*/
#kiyakuBox .kiyakuDd{margin-bottom: 1em;}
#kiyakuBox .kiyakuDd .txt{font-size: 90%;}
#kiyakuBox .kiyakuTable{background:#fff;width: 100%; max-width: 700px;}
#kiyakuBox .kiyakuTable th{background:#efefef;}
/*----- 【ご利用規約 ポップアップ用】 -----*/
#kiyakuBox.popKiyakuBox{background-color: #fff; border-radius: 0.5em; padding:1em;width: 90%; max-width: 800px;} 
#kiyakuBox.popKiyakuBox #kiyakuBoxInner{height: 60vh;width: 100%;overflow-y: auto;padding: 1em 2em;} 
#kiyakuBox.popKiyakuBox .kiyakuTtl{font-size: 150%; color: #B30043; font-weight: 600; line-height: 1.4;}
#kiyakuBox.popKiyakuBox .kiyakuPopClose a{display: block; width: 8em; text-align: center; padding: 0.5em 1em; background-color: #001b5b; color:#fff; border-radius: 2em; line-height: 1.4; margin: 1em auto 0;}

/*----------------------------------------------------------------------------
 ***                                                              footerArea
----------------------------------------------------------------------------*/
#footerArea{background-color: #f2f2f2;}
#footerArea #footerAreaInner{width:1200px; margin: 0 auto;}
#footerArea .footerMenuUl{width:100%; display: flex; justify-content: space-around; align-items: center;}
#footerArea .footerMenuLi a{color: #333; text-decoration: none; display: block; padding: 1.5em; line-height: 1;}
#footerArea .footerMenuLi.faq a{font-family: 'Noto Sans JP';}
#footerArea #copy{background-color:#001b5b;}
#footerArea #copy p{color: #f2f2f2; text-align: center; padding:0.8em 1em 1em; margin:0; line-height: 1;}


/*----------------------------------------------------------------------------
 ***                                                       noLinkCommonParts
----------------------------------------------------------------------------*/
/*----- 【共通パーツリンク非表示（無効）ページ用】 -----*/
.noLinkCommonParts #headerArea #headerAreaInner .logoBox .linkLogo{display: none;}
.noLinkCommonParts #headerArea #headerAreaInner .logoBox .imgOnlyLogo{display: block;}
.noLinkCommonParts #headerArea #headerAreaInner .rightMenuBox{display: none;}
.noLinkCommonParts #footerArea #footerAreaInner{display: none;}

/*----------------------------------------------------------------------------
 ***                                     @media screen and (max-width:1280px)
----------------------------------------------------------------------------*/
@media screen and (max-width:1280px){
  body{min-width:initial;}
  .secBox > .sectionInner{width: 95%; margin: 0 auto;}
  #headerArea #headerAreaInner{width: 100%; padding-left: 1em; max-width: auto;}
  #breadcrumbArea{width: 95%; margin: 0 auto;}
  #navBox .navBoxInner{width: 100%;}
  #footerArea #footerAreaInner{width:100%;}
  #underFirstViewSec .pageTtl{width: 100%; margin: 0 auto;}
  #underFirstViewSec .pageTtl img{width: 100%; height: auto;}
}