@charset "UTF-8";
.only-pc { display: none !important;}

/* ----------------------------------
 Base
---------------------------------- */
body > .wrapper {
	width: 100vw;
	overflow-x: hidden;
	overflow-y: visible;
}
.wrapper .forcms_block { 
	max-width: 100vw;
}

/* ----------------------------------
 PanKuzu
---------------------------------- */
.breadcrumb { width: 100%; height: 30px; padding-left: 15px; margin: 0 auto; font-size: 9px; display: flex; overflow-x: scroll; align-items: center; gap: 10px; background: #F0F5F7;}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a { font-size: 9px; color: #0047BA; word-break: keep-all; white-space: nowrap;}
.breadcrumb .arrow { font-size: 9px; color: #C4CBCF; word-break: keep-all; white-space: nowrap;}
.breadcrumb .current-label { font-size: 9px; color: #15181C; word-break: keep-all; white-space: nowrap;}

/* ----------------------------------
 Pager
---------------------------------- */
.navipage_.bottom_ { margin: 0; padding: 20px 0; border: none; text-align: center;}
.navipage_.bottom_ center { display: flex; justify-content: center; flex-wrap: wrap;}
.navipage_.bottom_ center .navipage_reverse_ { display: flex; justify-content: center; flex-wrap: wrap;}
.navipage_.bottom_ center .navipage_forward_ { display: flex; justify-content: center; flex-wrap: wrap;}
.navipage_.bottom_ center a,
.navipage_.bottom_ center .navipage_now_ { width: 30px; height: 30px; padding: 0; margin: 0 5px; border: none; border-radius: 30px; font-size: 12px; text-decoration: none; color: #15181C; display: flex; justify-content: center; align-items: center; transition: 0.3s;}
.navipage_.bottom_ center .navipage_first_,
.navipage_.bottom_ center .navipage_prev_,
.navipage_.bottom_ center .navipage_next_,
.navipage_.bottom_ center .navipage_last_ { width: 30px; height: 30px; padding: 0; margin: 0; border: none;}
.navipage_.bottom_ center > a       { border: #E9EEF0 2px solid; font-weight: 600; color: #15181C; background: #E9EEF0;}
.navipage_.bottom_ center > a:hover { border: #0047BA 2px solid; font-weight: 600; color: #0047BA; background: #ffffff;}
.navipage_.bottom_ center .navipage_now_ { border: #0047BA 2px solid; font-weight: 600; color: #ffffff; background: #0047BA;}
.navipage_.bottom_ center .navipage_first_ a,
.navipage_.bottom_ center .navipage_prev_ a,
.navipage_.bottom_ center .navipage_next_ a,
.navipage_.bottom_ center .navipage_last_ a { border: #ffffff 2px solid; display: block; font-size: 0; background: #fff; position: relative;}
.navipage_.bottom_ center .navipage_first_ a::before,
.navipage_.bottom_ center .navipage_first_ a::after,
.navipage_.bottom_ center .navipage_prev_ a::before,
.navipage_.bottom_ center .navipage_next_ a::before,
.navipage_.bottom_ center .navipage_last_ a::before,
.navipage_.bottom_ center .navipage_last_ a::after { content: ''; width: 8px; height: 8px; border-top: #9DA3A6 1px solid; border-left: #9DA3A6 1px solid; position: absolute; top: calc(50% - 4px); display: block;}
.navipage_.bottom_ center .navipage_first_ a::before { left:   8px; transform: rotate(-45deg);}
.navipage_.bottom_ center .navipage_first_ a::after  { left:  14px; transform: rotate(-45deg);}
.navipage_.bottom_ center .navipage_prev_ a::before  { left:  12px; transform: rotate(-45deg);}
.navipage_.bottom_ center .navipage_next_ a::before  { right: 12px; transform: rotate(135deg);}
.navipage_.bottom_ center .navipage_last_ a::before  { right:  8px; transform: rotate(135deg);}
.navipage_.bottom_ center .navipage_last_ a::after   { right: 14px; transform: rotate(135deg);}

/* ----------------------------------
 Contents Common
---------------------------------- */
h1.design-title { padding: 0 0 10px 0; margin: 30px 10px 20px; border-bottom: #DFE4E6 1px solid; font-family: "roc-grotesk", sans-serif; font-size: 30px; font-weight: 800; font-style: normal; text-align: center; line-height: 1.0; color: #0047BA;}
.no-data-message { margin: 40px 0; font-size: 15px; text-align: center;}

.side-navigation-frame { padding: 10px; margin-top: 20px; background: #F0F5F7;}
.side-navigation-frame > h2 { padding: 15px 10px; margin: 0; border-bottom: #DFE4E6 1px solid; font-size: 18px; font-weight: 600; line-height: 1.0; color: #0047BA;}
.side-navigation-frame > h3 { padding: 15px 10px; margin: 0; border-bottom: #DFE4E6 1px solid; font-size: 18px; font-weight: 600; line-height: 1.0;}
.side-navigation-frame ul { margin: 0 0 20px 0; border-bottom: #DFE4E6 1px solid;}
.side-navigation-frame ul:last-child { margin: 0; border-bottom: none;}
.side-navigation-frame li + li { border-top: #DFE4E6 1px solid;}
.side-navigation-frame li + ul { border-top: #DFE4E6 1px solid;}
.side-navigation-frame li a { padding: 15px 35px 15px 10px; font-size: 13px; text-decoration: none; line-height: 1.2; display: block; position: relative;}
.side-navigation-frame li.link a::after { content: ""; width: 8px; height: 8px; margin: 0 0 0 5px; border-right: 1px solid #9DA3A6; border-top: 1px solid #9DA3A6; position: absolute; top: calc(50% - 4px); right: 10px; transform: rotate(45deg);}
.side-navigation-frame + .Archive { margin-top: 0 !important;}

.for-other-contents-button { margin: 20px 10px;}
.for-other-contents-button a { width: 100%; height: 90px; padding: 3px 0 0 0; border-radius: 20px; font-family: "roc-grotesk", sans-serif; font-size: 34px; font-weight: 800; font-style: normal; text-decoration: none; color: #fff; background: #0047BA; display: flex; justify-content: center; align-items: center; position: relative; transition: 0.3s;}
.for-other-contents-button a::after { content: ""; width: 8px; height: 8px; margin: 0 0 0 5px; border-right: 1px solid #fff; border-top: 1px solid #fff; position: absolute; top: calc(50% - 4px); right: 20px; transform: rotate(45deg);}
.for-other-contents-button a.for-onlinestore { font-size: 18px; text-align: center;}
.for-other-contents-button a.for-onlinestore::after { display: none;}

.share-button-box { margin: 0 0 30px 0; display: flex; justify-content: center;}
.share-button-box ul { display: flex; justify-content: flex-end; align-items: center;}
.share-button-box ul li { margin: 0 0 0 20px;}
.share-button-box ul li.title { margin: 0; font-size: 15px; color: #0047BA;}
.share-button-box ul li img { width: 30px; vertical-align: top;}
.share-button-box ul li a { transition: 0.3s;}
.share-button-box ul li a:hover { opacity: 0.6;}

.contents-template-frame { margin: 0 0 40px 0; font-size: 14px; line-height: 2.0;}
.contents-template-frame strong { font-weight: bold;}
.contents-template-frame > .field-image { margin: 0 0 15px 0; text-align: center;}
.contents-template-frame > .field-image img { max-width: 100%; vertical-align: top;}
.contents-template-frame .field-text-box { margin: 0 0 40px 0;}

.field-tmplset img { max-width: 100%; max-height: 100%; height: auto; vertical-align: top;}
.field-tmplset .for-pc { display: none !important;}
.field-tmplset .blue-line { padding: 8px 15px; margin: 0 0 20px 0; border-radius: 10px; font-size: 15px; font-weight: 700; color: #fff; background: #0047BA; display: flex; align-items: center;}
.field-tmplset .blue { color: #0047BA;}
.field-tmplset .bold { font-weight: 700;}
.field-tmplset .field-title { padding: 0 0 10px 0; margin: 0 0 15px 0; border-bottom: #0047BA 2px solid; font-size: 15px; font-weight: 600;}
.field-tmplset .mark-list { margin: 15px 10px;}
.field-tmplset .mark-list li { padding: 0 0 0 1em; text-indent: -1em; list-style: disc inside;}
.field-tmplset .field-image { margin: 0 0 15px 0; text-align: center;}
.field-tmplset .field-image img { max-width: 100%; max-height: 100%; vertical-align: top;}
.field-tmplset .flex-frame { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column;}
.field-tmplset .flex-frame.desc-top { flex-direction: column-reverse;}
.field-tmplset .flex-frame.gray-box { padding: 15px 15px 5px 15px; border-radius: 15px; background: #F0F5F7;}
.field-tmplset .flex-frame + .flex-frame { margin-top: 30px;}
.field-tmplset .flex-image { width: 100%; margin: 0 0 20px 0;}
.field-tmplset .flex-desc  { width: 100%; margin: 0 0 20px 0;}
.field-tmplset .flex-desc figure { margin: 0 0 20px 0;}
.field-tmplset .flex-frame.column2-box { width: 100%; flex-direction: row; justify-content: space-between;}
.field-tmplset .flex-frame.column2-box .column-box { width: calc(50% - 7.5px); margin-bottom: 30px;}
.field-tmplset .flex-frame.column2-box .column-box .flex-image { width: 100%; margin: 0 0 15px 0;}
.field-tmplset .flex-frame.column2-box .column-box .flex-desc  { width: 100%;}
.field-tmplset .flex-desc-message-pop { padding: 15px; margin: 0 0 25px 0; border-radius: 15px; background: #F0F5F7; position: relative;}
.field-tmplset .flex-desc-message-pop::before { content: ''; border-left: 10px solid transparent; border-top: 15px solid #F0F5F7; border-right: 10px solid transparent; position: absolute; left: 30px; bottom: -15px;}
.field-tmplset .visual-right .flex-desc-message-pop::before { left: auto; right: 30px;}
.field-tmplset .accordion-frame { padding: 5px; border-radius: 15px; background: #F0F5F7;}
.field-tmplset .accordion-frame + .accordion-frame { margin-top: 10px;}
.field-tmplset .accordion-title { padding: 10px 50px 10px 20px; margin: 0; border-radius: 10px; font-size: 18px; font-weight: 700; color: #fff; background: #0047BA; display: flex; align-items: center; position: relative;}
.field-tmplset .accordion-title::before,
.field-tmplset .accordion-title::after { content: ''; width: 13px; border-top: #fff 1px solid; display: contents; position: absolute; right: 20px; top: calc(50% - 1px); transition: 0.3s;}
.field-tmplset .accordion-title::after { transform: rotate(90deg);}
.field-tmplset .accordion-title.active::after { transform: rotate(0deg);}
.field-tmplset .accordion-contents { padding: 15px;}
.field-tmplset .swiper-frame { width: 100%; margin: 0 auto; position: relative;}
.field-tmplset .swiper-button-prev { width: 50px; height: 50px; margin: 0; border-radius: 50px; background: rgba(255,255,255,0.9); top: calc(50% - 25px); left: -25px;}
.field-tmplset .swiper-button-prev::before { content: ""; width: 10px; height: 10px; border-right: 1px solid #9DA3A6; border-top: 1px solid #9DA3A6; position: absolute; right: 8px; top: calc(50% - 5px); display: block; transform: rotate(-135deg);}
.field-tmplset .swiper-button-next { width: 50px; height: 50px; margin: 0; border-radius: 50px; background: rgba(255,255,255,0.9); top: calc(50% - 25px); right: -25px;}
.field-tmplset .swiper-button-next::before { content: ""; width: 10px; height: 10px; border-right: 1px solid #9DA3A6; border-top: 1px solid #9DA3A6; position: absolute; left: 8px; top: calc(50% - 5px); display: block; transform: rotate(45deg);}
.field-tmplset .swiper-button-next::after,
.field-tmplset .swiper-button-prev::after,
.field-tmplset .swiper-button-disabled { display: none !important;}

.detail-page-navigation { width: 100%; padding: 0 20px; margin: 0 0 60px 0; display: flex; align-items: center;}
.detail-page-navigation .navi-next { margin: 0 0 0 auto;}
.detail-page-navigation .navi-prev a,
.detail-page-navigation .navi-next a { width: 110px; height: 40px; padding: 1px 0 0 0; border: #0047BA 2px solid; border-radius: 45px; font-size: 13px; color: #0047BA; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}

/* ----------------------------------
 Contact
---------------------------------- */
#page_contact_header { margin: 0 auto 30px; text-align: center;}
#page_contact_header p { margin: 0 0 20px 0; font-size: 13px; text-align: center;}
#page_contact_body .contact-block { margin-bottom: 30px; padding: 0 10px;}
#page_contact_body .contact-block-title { padding: 0; margin: 0 0 10px 0; font-size: 15px; font-weight: bold; color: #0047BA;}
#page_contact_body .contact-block .contact-box { margin-bottom: 10px; border: 1px solid #e6e6e6; border-radius: 2px;}
#page_contact_body .contact-block .contact-box .title { padding: 15px 0; position: relative;}
#page_contact_body .contact-block .contact-box .title:after { content: ""; display: block; width: 8px; height: 8px; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; transform: rotate(45deg); position: absolute; right: 17px; top: 50%; margin-top: -6px;}
#page_contact_body .contact-block .contact-box .title span { display: inline-block; font-weight: bold; color: #0047BA; vertical-align: middle;}
#page_contact_body .contact-block .contact-box .title .num { width: 12%; font-size: 20px; font-family: "Poppins", sans-serif; line-height: 1; text-align: center;}
#page_contact_body .contact-block .contact-box .title .txt { width: 88%; padding: 0 30px 0 10px; border-left: 1px solid #e6e6e6; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box;}
#page_contact_body .contact-block .contact-box .title .txt span { font-size: 12px; display: block;}
#page_contact_body .contact-block .title.acc_open:after { border: none; border-top: 2px solid #ccc; border-left: 2px solid #ccc;}
#page_contact_body .contact-block .contact-cont { padding: 18px 10px; border-top: 1px solid #e6e6e6;}
#page_contact_body .contact-block .contact-cont a { color: #0047BA;}
#page_contact_body .contact-block .contact-cont ul li { color: #666; margin-bottom: 5px; padding-left: 1em; text-indent: -1em;}
#page_contact_body .contact-block .contact-cont ul li .circle { margin: 0 0.25em 0 0; color: #c2c2c2;}
#page_contact_body .contact-block .contact-cont ul li .ttl-s { font-size: 11px;}
#page_contact_body .contact-block .contact-cont ul li .indent { padding-left: 1.25em; text-indent: 0;}
#page_contact_body .contact-block .contact-cont .cmn-morebtn { margin-bottom: 17px;}
#page_contact_body .contact-block .contact-cont .phone-box { text-align: center; background: #f0f0f0; padding: 10px;}
#page_contact_body .contact-block .contact-cont .phone-box .txt01 { font-weight: bold; font-size: 11px;}
#page_contact_body .contact-block .contact-cont .phone-box .txt02 { font-weight: bold; font-size: 16px; display: inline-block;}
#page_contact_body .contact-block .contact-cont .phone-box .txt02 span { font-size: 12px; padding-right: 5px;}
#page_contact_body .contact-block .contact-cont .phone-box .txt-free { padding-top: 5px; padding-left: 35px; background: url(../../img/usr/contact/ico_freedial.png) no-repeat left center; -webkit-background-size: 24px; background-size: 24px;}
#page_contact_body .contact-block .contact-cont .phone-box .adderss { padding-top: 12px; margin-top: 8px; border-top: 1px solid #ccc; font-size: 10px; color: #666;}#page_contact_body .cmn-static-block .box-l .cont .circle { margin: 0 0.25em 0 0; color: #c2c2c2;}
#page_contact_body .contact-block .memo { font-size: 11px; letter-spacing: 0;}
#page_contact_body .contact-block .contact-cont .cmn-morebtn { margin-top: 20px;}
#page_contact_body .contact-block .contact-cont .cmn-morebtn a { width: 100%; height: 45px; border: #0047BA 2px solid; border-radius: 45px; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.0; color: #fff; display: flex; justify-content: center; align-items: center; background: #0047BA; transition: 0.3s;}

/* ----------------------------------
 FreePage
---------------------------------- */
.bold { font-weight: bold;}
.mb20 { margin-bottom: 20px;}
.company-color { color: #CD0000 !important;}
.indent05 { padding-left: 0.5em; text-indent: -0.5em;}
.indent01 { padding-left:   1em; text-indent:   -1em;}
.indent15 { padding-left: 1.5em; text-indent: -1.5em;}
.indent02 { padding-left:   2em; text-indent:   -2em;}
.indent25 { padding-left: 2.5em; text-indent: -2.5em;}
.indent03 { padding-left:   3em; text-indent:   -3em;}
.indent35 { padding-left: 3.5em; text-indent: -3.5em;}
.site-freepage { margin: 0 auto;}
.site-freepage .box { margin: 0 auto 40px;}
.site-freepage .box p { font-size: 14px; line-height: 1.6;}
.site-freepage .box p + p,
.site-freepage .box p + ul,
.site-freepage .box ul + p,
.site-freepage .box ul + ul { margin-top: 15px;}
.site-freepage .in-box { margin: 0 20px 40px 20px;}
.site-freepage .in-box li a,
.site-freepage .in-box p a { text-decoration: underline; color: #0047BA;}
ul.mark-list li { padding-left: 1em; text-indent: -1em; list-style: disc inside;}

h2.has-line-mark { padding-bottom: 14px; padding-left: 14px; margin-bottom: 15px; border-bottom: 1px solid #e6e6e6; font-size: 16px; line-height: 1.2; position: relative;}
h2.has-line-mark::before { content: ''; width: 4px; height: 18px; border-radius: 3px; position: absolute; top: 0; left: 0; background: #848484;}
h3.gray-box-title { padding: 10px 15px; margin: 0 0 20px 0; font-size: 14px; font-weight: bold; background: #f0f0f0;}