@charset "utf-8";
* {box-sizing: border-box;}
body,html {padding:0;margin:0}
body {font-family: "Noto Sans JP", sans-serif; font-size:16px;}
h1,h2,h3,h4,p,ul,ol {padding:0;margin:0}
p {line-height: 1.8rem;}
li {list-style: none;}
.mincho {font-family: "Noto Serif JP", serif;}

.transition {transition: all 0.3s;}
.fixbody {overflow-y: hidden;}

.new {padding:5px; border-radius:5px; line-height: 10px;}

/*パンくず*/
nav.bread-crumbs ul li {display: inline-block;color:#888;margin-right:10px;position:relative}
nav.bread-crumbs ul li:not(:last-of-type)::after {content:"/";margin-left:10px}
nav.bread-crumbs ul li a {text-decoration: none;color:#888}

/*右上の検索*/
form > div > span:has(>input.search-box),form > div > span:has(>input.search-box)+span {height:25px} 
input.search-box {border:none; width:100%; height:25px; padding:2px 5px 2px 25px; outline: none; transition: all 0.5s; border-radius: 5px 0 0 5px; background-color: #EEE;}
span:has(>input.search-box) {position:relative; width:80%; transition: all 0.5s;}
span:has(>input.search-box)::before {content:""; position:absolute; z-index: 9; background-image: url(/res/figure/search.png); height:15px; width:15px; background-size: contain; background-repeat: no-repeat;top:50%;left:5px;transform:translate(0,-50%)}
/*span:has(>input.search-box:focus-within), span:has(input.search-box:not(:placeholder-shown)) {width:80%}*/
span:has(>input.search-box)+span {width:20%}
span:has(>input.search-box)+span > button {width:100%;height:25px;border:none;border-radius:0 5px 5px 0;cursor: pointer;}

/*検索結果が無い場合*/
div.none-item {height:300px}


/*リンクボタン*/
a.link-button {position:relative; padding:15px 60px 15px 20px;transition: all 0.3s;box-shadow: 0 2px 8px #00000026}
a.link-button::after {content:"";background-image:url(/res/figure/arrow.png);position:absolute; background-size: contain; display:inline-block;width:20px;height:20px;top:50%;transform: translate(10px,-50%);}
a.link-button:hover {background:#F36108;color:#fff;box-shadow: 0 6px 8px #F36108}
a.link-button:hover::after {background-image: url(/res/figure/arrow-light.png);}

/*バナーの下方FIXED*/
.fix-bottom {position:fixed;width:100%;bottom:0;z-index: 90;}

/*マウスホバーの影の効果*/
.box-shadow-interations {transition: box-shadow 0.3s,transform 0.3s;}
.box-shadow-interations:hover {box-shadow: 0 8px 10px #00000026 !important;transform: scale(1.003)}

/*画像マウスホバー時のスケール変化の効果*/
.scale-effect img {transition: transform 0.3s; transform: scale(1.1);}
.scale-effect:hover img {transform:scale(1.0)}

/*フェード イン/アウト の効果*/
.opacity-interactive {transition:opacity 0.3s;opacity:0;visibility: hidden;}
.opacity-interactive.visible {opacity:1 !important;visibility: visible;}


/*リンクなどの文字色のマウスホバー効果*/
.color-interactive:hover {color:#F36108}
.color-interactive:hover * {color:#F36108}
    /*重複して作っちゃった*/
    .color-link-text.interactive:hover {color:#F36108}

/*フッターリンクなどのマウスホバー効果。強い色にしないため。*/
.color-interactive-moderate:hover {color:#6498CE}

/*影を入れるときの統一*/
.box-shadow {box-shadow: 0 2px 8px #00000026}

/*over lay の統一*/
.overlay {position:absolute; opacity:0.6; background-color: #000; width:100%; height:100vh; left:0; top:63px; transition: opacity 1s;z-index:0; display: none;}


.swiper-slide article a {background-color: #FFF;}
/*swiper のボタンの統一*/
.swiper-wrapper {display:flex;}
.swiper-button-prev,.swiper-button-next {width:30px !important;height:30px !important;border-radius: 15px;box-shadow: 0 2px 8px #000;}
.swiper-button-prev {left:-10px !important;}
.swiper-button-next {right:-10px !important;}
.swiper-button-prev::after, .swiper-button-next::after { bottom: 0; content: "" !important; height: 0; margin: auto; position: absolute; top: 0;transform: translate(-50%,0) !important; width: 0;font-family: none !important; }
  /* 前への矢印カスタマイズ */
.swiper-button-prev::after { border-bottom: 10px solid transparent; border-right: 15px solid #000; border-top: 10px solid transparent; left:45%; }
  /* 次への矢印カスタマイズ */
.swiper-button-next::after { border-bottom: 10px solid transparent; border-left: 15px solid #000; border-top: 10px solid transparent; left:55%; }

/* サイトの header */
header {padding-bottom:60px}
header .fixed > div {background-color: #fff;}
header > div {width:100%;background-color: #fff;z-index: 99;}
header > div > div {padding-bottom:3px}
header nav {margin-left:5px}
header li {list-style: none;margin:0 5px;white-space: nowrap;}
header li::after {content:"";position:relative;display:block; height:3px;border-radius:1px;width:100%;left:0;bottom:-3px;background-color: #F36108;transition: all 0.5s;transform: scale(0,1);transform-origin: center;}
header li:first-child {margin: 0 5px 0 0}
header figure img {width:150px}


/* サイトのfooter */
footer > div {padding:40px 10px}
footer .origin > div {padding-right:40px}
footer .unit {padding:5px}


/* 色の定義 */
  /*text*/
.color-regular-text {color:#222222}
.color-weak-text {color:#888}
.color-link-text {color:#6498CE}
.color-reverse-text {color:#fff}
.color-notice-text {color: #F36108;}

  /*background*/
.color-notice-bg {background-color: #F36108;}
.color-light-notice-bg {background-color: #FEE;}
.color-light-weak-bg {background-color: #DDD;}
.color-weak-bg {background-color: #888;}
.color-regular-bg {background-color:#222}
.color-reverse-bg {background-color: #fff;}
  /*border*/
.color-light-weak-bd {border-color: #DDD;}

/* スペースの定義 */
.x-padding {padding-left:10px; padding-right:10px;}
.top-padding-half {padding-top:10px;}
.top-padding-single {padding-top:20px;}
.top-padding-double {padding-top:40px;}

.y-padding-double {padding-top: 20px; padding-bottom: 20px;}
.y-padding-single {padding-top: 10px; padding-bottom: 10px;}
.y-padding-half {padding-top: 5px; padding-bottom: 5px;}

.top-margin-half {margin-top:10px;}
.top-margin-single {margin-top:20px;}
.top-margin-double {margin-top:40px;}

.bottom-padding-half {padding-bottom:10px}
.bottom-padding-single {padding-bottom:20px}
.bottom-padding-double {padding-bottom:40px}

.bottom-margin-half {margin-bottom:10px}
.bottom-margin-single {margin-bottom:20px}
.bottom-margin-double {margin-bottom:40px}

.left-margin-half {margin-left:10px}
.left-margin-single {margin-left:20px}


/* フォントサイズの定義 */
.font-exsmall {font-size:10px}
.font-smaller {font-size:12px}
.font-min {font-size:13.5px}
.font-semi-min-pc {font-size:14px}
.font-regular {font-size:16px}
.font-little-large {font-size:18px}
.font-semi-large {font-size: 20px;}
.font-large {font-size:24px}
.font-larger {font-size:28px}
.font-exlarge {font-size: 32px;}
.font-largest {font-size:48px}

/* line-height */
.line-height-narrow {line-height: 1.2rem;}
.line-height-wide {line-height: 1.8rem;}

/* include contents */
/* kaitori */
section.kaitori > a {height:320px;background-image: url(/res/figure/top/kaitori.jpg);background-repeat: no-repeat;background-size: cover;background-position-y: 50%;}
section.kaitori > a::before {content:""; position:absolute; background: linear-gradient(-80deg,rgba(0,0,0,0),rgba(0,0,0,1)); width:100%; height:100%}
section.kaitori > a > div {width:480px;left:50%;transform: translate(-480px,0);}
section.kaitori > a > div span.action {padding:15px 20px;height:42px;border-radius: 3px;line-height: 50%;transition: all 0.3s;}
section.kaitori > a > div li {padding-left:20px}
section.kaitori > a > div li::before {content:"";width:4px;height:12px;border-bottom:solid 2px #fff;border-right:solid 2px #fff;position:relative;display:inline-block;transform: rotate(30deg);left:-12px }
section.kaitori > a:hover > div span.action {background-color: #fff;color:#F36108}
/* checklist section */
section.checklist > div {padding:30px}
section.checklist > div > div > div:first-child {width:60%}
section.checklist > div > div > div:last-child {width:40%}
section.checklist > div > div > div:last-child img {width:100%;object-fit: contain;}
section.checklist a.action {padding:10px 15px;border-radius: 5px;border:1px solid #F36108}
section.checklist a.action:hover {color:#F36108;background-color: #fff;}
/* ranking section */
section.ranking .swiper-slide {height:auto}
section.ranking article {padding:20px 10px;height:100%}
section.ranking article a {border-radius: 5px;height:100%;}
section.ranking article figure {margin:0;height:133px; overflow-y: hidden;}
section.ranking article img {width:100%;object-fit: cover;height:133px;object-position: center;}
section.ranking article p {padding: 5px 10px}



/* side contents */
aside .guide-articles {width: 100%;}
aside .guide-articles > div {border-width: 1px; border-style: solid; border-radius:6px}
aside .guide-articles > div .accordion-switch {padding:15px 10px;cursor: pointer;}
aside .guide-articles > div .accordion-switch+.accordion:not(:last-child) {border-bottom-width: 1px;border-bottom-style: solid;}
aside .guide-articles > div .accordion-switch span {padding-top:5px}
aside .guide-articles > div .accordion-switch span img {height:14px;transform: rotate(90deg);transition: transform 0.5s;}
aside .guide-articles > div .accordion-switch.open span img {transform: rotate(-90deg);}
aside .guide-articles > div .accordion-switch:not(.open)+.accordion{grid-template-rows: 0fr;}
aside .guide-articles > div .accordion-switch.open+.accordion{grid-template-rows: 1fr;}
aside .guide-articles > div .accordion {display:grid; transition: all 0.5s;}
aside .guide-articles > div .accordion ul {overflow: hidden;margin:0}
aside .guide-articles > div .accordion ul li {padding:10px 5px; }
aside .guide-articles > div .accordion ul li:not(:last-child) {border-bottom-width:1px; border-bottom-style: solid}
aside .guide-articles > div a {transition: all 0.5s;}
aside .guide-articles > div a:hover {color:#F36108}


aside .kaitori > div {padding:10px;border-width: 1px;border-style: solid; border-radius: 6px;}
aside .kaitori > div p {line-height: 1.3rem}
aside .kaitori > div a.pop-selector {padding:12px 5px;border:1px solid #DDD;border-radius: 6px;cursor: pointer;transition: all 0.5s;}
aside .kaitori > div a.pop-selector:hover {color:#F36108;border-color:#F36108}
aside .kaitori > div span.loud {position: relative}
aside .kaitori > div span.loud::before {content:""; background-color: #888; position: absolute; width:1px; height:12px;left:-15px;bottom:2px;transform: rotate(-30deg);}
aside .kaitori > div span.loud::after {content:""; background-color: #888; position: absolute; width:1px; height:12px;right:-15px;bottom:2px;transform: rotate(30deg);}
aside .kaitori > div button.action {color:#FFF;background-color: #F36108;border:1px solid #F36108; padding:10px 5px;border-radius: 6px;cursor: pointer; width: 100%;}
aside .kaitori > div button.action:hover {color:#F36108; background-color: #FFF;}


/*fixed banner*/

section.kaitori-fixed-banner > a {background-color: #164081;padding:5px 10px;left:0}
section.kaitori-fixed-banner > a h5 {margin:0 0 5px 0;color:#FFFF00;position:relative}
section.kaitori-fixed-banner > a h5::before {content:"";width:1px;height:1px;border:2px solid transparent;border-top:20px solid #FFFF00;position:absolute;left:-15px;top:5px;transform:rotate(-25deg)}
section.kaitori-fixed-banner > a h5::after {content:"";width:1px;height:1px;border:2px solid transparent;border-top:20px solid #FFFF00;position:absolute;right:-15px;top:5px;transform:rotate(25deg)}
section.kaitori-fixed-banner > a p.action {padding:5px 10px;border-radius: 5px;border:2px solid #FFF}
section.kaitori-fixed-banner > a h6 {padding:0 40px;margin:0}
section.kaitori-fixed-banner > a:hover p.action {color:#F36108;background-color: #FFF;border-color: #F36108;}

@media screen and (min-width:769px) {
    /* only pc css */
    header li:hover::after {transform:scale(1,1)}
    header li:hover .sub-menu-content {opacity: 1;z-index: 1;top:60px}
    header ul:has(li:hover > .sub-menu-content)+div.overlay {display:block !important}
    header .sub-menu-content {background-color: #fff;padding:20px;left:0;top:-250px; opacity:0; transition: opacity 0.5s;z-index:-1}
    header .sub-menu-content article {width:50%}
    header .sub-menu-content article div:has(>img) {width:64px}
    header .sub-menu-content article img {width:100%}
    header .sub-menu-content article p {margin-left:15px}

    .content-frame-width {min-width:1160px}
    .content-fixed-width {width:1160px}

    /* the left part of 2 column layout */
    .left-column-pc {width:75%}

    /* font-sizes */
    .font-exsmall-pc {font-size:10px}
    .font-smaller-pc {font-size:12px}
    .font-min-pc {font-size:13.5px}
    .font-semi-min-pc {font-size:14px}
    .font-regular-pc {font-size:16px}
    .font-little-large-pc {font-size:18px}
    .font-semi-large-pc {font-size: 20px;}
    .font-large-pc {font-size:24px}
    .font-larger-pc {font-size:28px}
    .font-exlarge-pc {font-size: 32px;}
    .font-largest-pc {font-size:48px}

    /* spacer */
    .x-padding-pc {padding-left:10px; padding-right:10px;}
    .top-padding-half-pc {padding-top:10px;}
    .top-padding-single-pc {padding-top:20px;}
    .top-padding-double-pc {padding-top:40px;}
    .y-padding-double-pc {padding-top: 20px; padding-bottom: 20px;}
    .y-padding-single-pc {padding-top: 10px; padding-bottom: 10px;}
    .y-padding-half-pc {padding-top: 5px; padding-bottom: 5px;}
    .top-margin-half-pc {margin-top:10px;}
    .top-margin-single-pc {margin-top:20px;}
    .top-margin-double-pc {margin-top:40px;}

    .bottom-padding-half-pc {padding-bottom:10px}
    .bottom-padding-single-pc {padding-bottom:20px}
    .bottom-padding-double-pc {padding-bottom:40px}

    .bottom-margin-half-pc {margin-bottom:10px}
    .bottom-margin-single-pc {margin-bottom:20px}
    .bottom-margin-double-pc {margin-bottom:40px}

    .box-shadow-pc {box-shadow: 0 2px 8px #00000026}
    /* line height */
    .line-height-narrow-pc {line-height: 1.2rem;}
    .line-height-wide-pc {line-height: 1.8rem;}

    /* side contents */
    aside {width:25%;padding-left:20px;}
    aside .ad-slot img {width:100%}

    /* search */
    form:has(span>input.search-box) {width:25%;padding-left:15px}

}
@media screen and (max-width:768px){
    /* only phone css */

    input.search-box {height:30px;}
    span:has(>input.search-box)+span > button {height:30px;}

    /* header */
    header figure {order:2}
    header nav {order:1}
    header .account-logo {padding-right:5px}
    header .account-logo img {width:36px}
    header .hamburger-container {padding-right:10px}
    header .hamburger {width:37px;height:37px;}
    header .hamburger > span {width:25px;height:3px;border-radius: 2px;left:50%;transition: all 0.5s;}
    header .hamburger > span:first-child {top:50%;transform: translate(-50%, -10px);}
    header .hamburger > span:nth-child(2) {top:50%;transform: translate(-50%,-50%);}
    header .hamburger > span:last-child {top:50%;transform: translate(-50%, 7px);}
    header .hamburger.open > span:first-child {width:29px;top:17px;left:4px;transform: rotate(225deg);}
    header .hamburger.open > span:nth-child(2) {display:none}
    header .hamburger.open > span:last-child {width:29px;top:17px;left:4px;transform: rotate(-225deg);}
    header nav ul {position: fixed; top:0;height:100vh;left:-100%;background-color: #fff;transition: left 1s;}
    header nav ul.open {left:0;z-index: 100;}
    header li {padding:15px 10px}
    header li span.menu-close {cursor: pointer;width:30px;height:30px;background-image: url(/res/figure/close.svg); background-size: cover;}
    header li span.sub-menu-close {cursor: pointer;width:30px;height:30px;background-image: url(/res/figure/prev.svg); background-size: cover;}
    header li > div {padding-right:30px} 
    header li:first-child {margin: 0 5px}
    header li:has(.sub-menu-content) span.arrow {content:"";background-image:url(/res/figure/next.svg);background-repeat: no-repeat; background-size: cover; width:20px;height:20px;position:absolute;right:5px;top:50%;transform: translate(0,-50%); cursor: pointer;}
    header .sub-menu-content {background-color: #fff;padding:20px;left:-200%;top:0; width:auto;height: 100vh; transition: left 0.5s;z-index:101}
    header .sub-menu-content .sub-menu-head {height:60px}
    header .sub-menu-content .sub-menu-head:nth-child(2n+1) > div {flex-grow: 1;}
    header .sub-menu-content .sub-menu-head:nth-child(2n) > div {flex-grow: 2;}
    header .sub-menu-content.slide-open {left:0px}
    header .sub-menu-content article {width:auto;margin-top:20px}
    header .sub-menu-content article div:has(>img) {width:64px}
    header .sub-menu-content article img {width:100%}
    header .sub-menu-content article p {margin-left:15px}
    


    body {font-size: 14px;}

    /* font-sizes */
    .font-exsmall {font-size:8px}
    .font-smaller {font-size:9px}
    .font-min {font-size:10.5px}
    .font-semi-min {font-size:12px}
    .font-regular {font-size:14px}
    .font-little-large {font-size:16px}
    .font-semi-large {font-size: 18px;}
    .font-large {font-size:20px}
    .font-larger {font-size:24px}
    .font-exlarge {font-size: 28px;}
    .font-largest {font-size:36px}

    .font-exsmall-sp {font-size:8px}
    .font-smaller-sp {font-size:9px}
    .font-min-sp {font-size:10.5px}
    .font-semi-min-sp {font-size:12px}
    .font-regular-sp {font-size:14px}
    .font-little-large-sp {font-size:16px}
    .font-semi-large-sp {font-size: 18px;}
    .font-large-sp {font-size:20px}
    .font-larger-sp {font-size:24px}
    .font-exlarge-sp {font-size: 28px;}
    .font-largest-sp {font-size:36px}

    /* spacer */
    .x-padding-sp {padding-left:10px; padding-right:10px;}
    .top-padding-half-sp {padding-top:10px;}
    .top-padding-single-sp {padding-top:20px;}
    .top-padding-double-sp {padding-top:40px;}
    .y-padding-double-sp {padding-top: 20px; padding-bottom: 20px;}
    .y-padding-single-sp {padding-top: 10px; padding-bottom: 10px;}
    .y-padding-half-sp {padding-top: 5px; padding-bottom: 5px;}
    .top-margin-half-sp {margin-top:10px;}
    .top-margin-single-sp {margin-top:20px;}
    .top-margin-double-sp {margin-top:40px;}

    .bottom-padding-half-sp {padding-bottom:10px}
    .bottom-padding-single-sp {padding-bottom:20px}
    .bottom-padding-double-sp {padding-bottom:40px}

    .bottom-margin-half-sp {margin-bottom:10px}
    .bottom-margin-single-sp {margin-bottom:20px}
    .bottom-margin-double-sp {margin-bottom:40px}

    /* line height */
    .line-height-narrow-sp {line-height: 1.2rem;}
    .line-height-wide-sp {line-height: 1.8rem;}

    /* include contents */
    /* kaitori */
    section.kaitori > a {background-position-y: unset;height:190px}
    section.kaitori > a::before {background:rgba(0,0,0,0.6)}
    section.kaitori > a > div {width:100%;transform: translate(-50%,0);}
    /* checklist*/
    section.checklist > div > div > div {width:100% !important}


    aside .ad-slot img {width:70%}

    section.kaitori-fixed-banner > a h6 {padding:0 20px}
}