/* ---------- font ---------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@400;700&display=swap');

:root{
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-title: 'Zen Maru Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	/*font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp);
    font-weight: 500;
}
.title, h2, h3, h4 {
    font-family: var(--font-title) !important;
    font-weight: bold;
    letter-spacing: 2px;
}
/*.font_en, a[href^="tel:"]{
    font-family: var(--font-en);
}*/


/* ---------- color ---------- */

.linkStyle{color: #4269b0;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}

:root {
    --normal_color: #333333;
    --color1: #4269b0; /* メインカラー */
    --color2: #eff9fc; /* サブカラー */
    --color3: #a3d0e2; /* アクセントカラー1*/
    --color4: #ffeee5; /* アクセントカラー2*/
    --color5: #e67e8f; /* アクセントカラー2*/
}
.txt{
	color: var(--normal_color);
}

/********** svg **********/

.icon{
	fill: currentColor;
	fill-rule: evenodd;
	stroke: none;
	stroke-width: 0;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.more_txt1 svg{transform: translateY(2px);}
.cms_link_box svg{transform: translateY(2px);}
/* ---------- all ---------- */
.pd_b-80px {
    padding-bottom: 80px;
}
.mg_b-80px {
    margin-bottom: 80px;
}
.marker {
    background: -webkit-linear-gradient(transparent 60%, #faeeb8 60%);
    background: -o-linear-gradient(transparent 60%, #ff6 60%);
    background: linear-gradient(transparent 60%, #faeeb8 60%);
}


/* ---------- header ---------- */
header.clone-nav {
    transform: translateY(0);
    background-color: rgb(255 255 255 / 70%);
}
header .logo {
    max-width: 177px;
    padding-bottom: 6px;
}
header .txt_white {
    color: #303030;
}
.menu{
    display: none;
}
.cms_link div a {
    padding: 15px 10px;
    padding-right: 50px;
    margin: 3px 0;
}
.cms_link{top: 17%;}



/* ---------- top ---------- */
.main_img{margin-top: 98px;}
.main_img_wrap {
    height: auto;
    min-height: auto;
}
.t_banner_box .banner{box-shadow: 0px 0px 0px rgba(0,0,0,0);}

#contents {
    padding-bottom: 70px;
}
#top_contents3 img, .mainwrap-l, #sp_nav .sp_nav_inner, #sp_nav .list_wrap {
    border-radius: 24px;
}

#question{background: transparent;}
#question:before{display: none;}
#question .box .box_item {
    padding: 50px;
    background: url(../img/bg01.jpg) center / 600px repeat #ffffff;
    border-radius: 20px;
    border: 2px solid #e3e3e3;
    position: relative;
}
#question .box .box_item:before {
    content: '';
    display: inline-block;
    width: 78px;
    height: 78px;
    background-image: url(../img/arrow01.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -57px;
}
#question .txt {
    width: calc(50% - 40px);
    margin-right: 20px;
    margin-left: 20px;
    padding-left: 50px;
    box-sizing: border-box;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
}
#question .txt .check {
    position: absolute;
    left: 4px;
}

#catch, #page_title {
    background-image: url(../img/bg02.jpg) !important;
}
.item1 {
    max-width: 600px;
}
#catch .box {
    margin-right: 0;
    margin-left: 5%;
    border-radius: 15px;
    background-color: #fff;
}

#contents h2{
    color: var(--color-normal);
    font-size: 38px;
}
#contents .box .box_item {
    border-radius: 15px;
}


/* ---------- under ---------- */
.btn_container {
    width: min(86%, 350px);
    margin-top: 15px;
}
.top_btn_container {
    width: min(86%, 350px);
    margin: auto;
    margin-top: 178px;
}
.con_bnr{
    width: min(86%, 350px);
    margin: auto;
}
.con_bnr_title {
    margin-top: 80px;
    display: inline-block;
    padding: 15px;
    border-radius: 5px;
    background-color: var(--color3);
}
#page_title {
    margin-top: 87px;
}
.more_txt1 {
    font-size: 14px;
}

#cms_5-b .cate_box .arrow,
.cms_5-b .cate_box .arrow{
    display: inline-block;
    width: 35px;
    height: 35px;
}
#cms_5-b .cate_box .arrow svg,
.cms_5-b .cate_box .arrow svg{
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);	
}
#cms_5-b .arrow svg,
.cms_5-b .arrow svg{
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#cms_5-b .cate_box .arrow_be svg,
.cms_5-b .cate_box .arrow_be svg{
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);	
}
/* ---------- 1100px以下---------- */
@media screen and (max-width: 1100px){
header .txt_white {
    font-size: 14px;
}
}

/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
header .logo img {
    height: 70px !important;
}
.cms_link {
    top: 12%;
}
.button_container span {
    background-color: #2e2e2e;
}
.main_img {
    height: auto;
}
#question{
    padding-bottom: 50px;
}
#question .box .box_item{
    padding: 22px;
}
#question .box .box_item:before{
    width: 50px;
    height: 50px;
    bottom: -42px;
}
#catch {
    padding-top: 39px;
}
.item1 {
    margin-bottom: 50px;
}
#catch .box {
    margin-left: 0;
}
.top_btn_container {
    margin-top: 52px;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
header .logo img {
    height: 46px !important;
}
.item1 {
    margin-bottom: 27px;
    width: 62.66667% !important;
}
.cms_link {
    top: auto;
    bottom: -3px;
}
.main_img {
    margin-top: 62px;
}
.t_banner_box {
    margin-top: 26px;
    width: 79% !important;
}
#question .title{
    letter-spacing: 2px;
}
#question .box .box_item {
    padding: 14px;
}
#question .box .box_item:before{
    bottom: -62px;
}
#contents {
    padding-bottom: 50px;
    border-radius: 0;
}
#contents h2 {
    font-size: 22px;
}
.top_btn_container {
    margin-top: 32px;
}
.border_do10-b {
    border-bottom: 5px dotted;
}
.cms_title {
    margin-bottom: 20px;
}
#page_title {
    margin-top: 65px;
     height: 138px;
}
.btn_container {
    margin: auto;
    margin-top: 15px;
}
.con_bnr_title {
    margin-top: 34px;
    display: block;
    background-color: var(--color3);
}
.con_bnr {
    width: min(95%, 350px);
}
#cms_5-b .cate_box .arrow,
.cms_5-b .cate_box .arrow{
    width: 25px;
    height: 25px;
}
}

/* loading 不具合解除 */
.top_loader div {
  visibility: hidden;
  overflow: hidden;
  width: 0;
  white-space: nowrap;
  animation: dummy 0s linear 0.2s forwards, /* ダミーでvisibility制御 */
             typing 1.5s steps(20, end) 0.3s forwards,
             blink-caret 0.8s step-end infinite 1.8s;
}

@keyframes dummy {
  to { visibility: visible;overflow: visible;
    width: 100%; }
}