@charset "utf-8";
/* own specific part */
.mincho {font-family: "Noto Serif JP", serif;}
div:has(>.swiper-pagination) {height:30px}



/* main visual part */
.main-visual .visual {width:50%;height:370px; background-image: url(/res/figure/main_visual.jpg);background-repeat: no-repeat;background-size:cover;}
.main-visual .topic-area {width:50%;height:395px;background-color:#fff;}
.main-visual .topic-area::before {content: ""; background-color: #fff; position: absolute; width: 600px; height: 440px; border-radius: 50% 50%; transform: rotate(-70deg); top: 0; right: -140px;}
.main-visual .topic-area .topic-spacer {top:50%;right:-50px; width:600px; transform: translate(0px,-50%);z-index:2}
.main-visual .topic-area .topic-spacer input {width:60%;height:40px;border:none;box-shadow: 0px 0px 4px 1px #BDBDBD; border-radius: 8px 0 0 8px;padding:5px 5px 5px 10px;}
.main-visual .topic-area .topic-spacer button {width:20%;height:40px;border:none;box-shadow: 0px 0px 1px 1px #F36108;border-radius:0 8px 8px 0;cursor:pointer;transition: all 0.3s;}
.main-visual .topic-area .topic-spacer button:hover {background-color: #fff;color:#F36108}
.main-visual .topic-area .topic-spacer h1 { margin-bottom:10px}
.main-visual .topic-area .topic-spacer h1 figure img {width:285px}
.main-visual .topic-area .topic-spacer h1+p {margin-bottom:15px}


/* top categories section */
section.categories-section .swiper-slide {height:auto}
section.categories-section .swiper-slide:nth-child(-n+2) {width:50%}
section.categories-section .swiper-slide:nth-child(n+3) {width:33.3%}
section.categories-section article.main-articles {padding:5px;height:100%;}
section.categories-section article.main-articles > a {width:100%;height:160px;box-shadow: 0 2px 8px #00000026;border-radius: 10px;}
section.categories-section article.main-articles > a > div:first-child {padding:20px 15px}
section.categories-section article.main-articles > a > div:first-child::before {content:"";position:absolute;background-color: #fff;width:300px;height:220px;border-radius: 50% 50%;top:-15%;right:-64px;transform:rotate(-70deg)}
section.categories-section article.main-articles > a > div:last-child img {width:100%; height:100%; object-fit: cover;}
section.categories-section article.main-articles > a > img {height:35px;top:10px;right:10px}
section.categories-section article.sub-article {padding:5px;height: 100%;}
section.categories-section article.sub-article.emphasis > a {background-color: #FFFF00;}
section.categories-section article.sub-article > a {box-shadow: 0 2px 8px #00000026; width:100%;border-radius: 10px;padding:20px 15px;height:100%}
section.categories-section article.sub-article > a div:has(img) {height:50px;width:50px;top:5px;right:5px;border-radius: 25px;background-color: #FFF;}
section.categories-section article.sub-article > a div img {width:65%;}




/* content categories section */
section.content-categories .content-pc article {padding:20px 5px 10px 5px}
section.content-categories .content-pc article > a {border-radius: 5px;padding-bottom:10px}
section.content-categories .content-pc article > a > div:last-child {padding:15px 10px}
section.content-categories .content-pc article div:has(>img) {height:180px;}
section.content-categories .content-pc article img {width:100%;object-fit: cover;}


/* latest article section */
section.latest-articles .swiper {height:346px;overflow-y: hidden;}
section.latest-articles article > a {border-radius: 5px;}
section.latest-articles article > a > div:has(>figure) {height:180px}
section.latest-articles article > a img {object-fit: cover;height:180px;width: 100%;}
section.latest-articles figure {margin:0}



/* relation services section */
section.relation-services .content-pc article {padding:30px 5px 20px 5px}
section.relation-services .content-pc article div:has(>img) {height:180px;overflow: hidden;}
section.relation-services .content-pc article img {width:100%;height:180px;object-fit: cover;}
section.relation-services .content-pc article ol {counter-reset: listnum; list-style: none;}
section.relation-services .content-pc article ol li a {width:100%}
section.relation-services .content-pc article ol li a span {margin-right:10px}



/* other useful content section */
section.other-useful-contents div:has( > article) {width:33.33%}
section.other-useful-contents .swiper-slide {height:auto}
section.other-useful-contents article {padding:20px 10px;height:100%}
section.other-useful-contents article a {height:345px;padding:15px 10px}
section.other-useful-contents article figure {height:96px}
section.other-useful-contents article img {height:100%}
section.other-useful-contents article p.absolute {bottom:15px;left:50%;transform: translate(-50%,0);}




/* short-links section */
section.short-links nav .flex-row-pc > div {flex-grow: 1;}

section.kaitori-fixed-banner > a {background-color: #164081;padding:5px 10px}
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) {
    section.content-categories .content-pc {width:25%}
    section.relation-services .content-pc {width:25%}
}



@media screen and (max-width:768px){
    /* main visual part */
    .main-visual .visual {width:100%;height:200px;background-size:cover;background-position:center}
    .main-visual .topic-area {width:100%;height:auto}
    .main-visual .topic-area::before {width: 120%; height: 100px; transform: rotate(-2deg) translate(-50%,0); top:-60px; left: 50%; right:auto}
    .main-visual .topic-area .topic-spacer {width:100%; transform: translate(0,-15px);padding:0 10px;max-width: none;}
    .main-visual .topic-area .topic-spacer h1 figure img {width:195px}
    .main-visual .topic-area .topic-spacer input {width:70%;}
    .main-visual .topic-area .topic-spacer button {width:30%;}


    /*top categories section*/

    section.categories-section article.main-articles {padding:5px;height: 100%;width:100%;}
    section.categories-section article.main-articles > a,section.categories-section article.sub-article > a {height:210px}
    section.categories-section article.main-articles > a > div:first-child::before {display: none;}
    section.categories-section article.main-articles > a > div:not(:has(img)) {width:100%; height:100%}
    section.categories-section article p.absolute-sp {bottom:15px;}




    /* content categories section */
    section.content-categories article {width:100%}


    /* other useful content section */
    section.other-useful-contents article a {height:100%;}
    /* ranking section */

    /* short-links section */
    section.short-links p.title {padding:5px 0;}
    section.short-links div.link-group {border-bottom:1px solid #BDBDBD}
    section.short-links div.link-group .accordion-switch span {padding:5px;cursor: pointer;}
    section.short-links div.link-group .accordion-switch span img {height:14px;transform: rotate(90deg);transition: transform 0.5s;}
    section.short-links div.link-group .accordion-switch.open span img {transform: rotate(-90deg);}

    section.short-links div.link-group .accordion-switch:not(.open)+.accordion{grid-template-rows: 0fr;}
    section.short-links div.link-group .accordion-switch.open+.accordion{grid-template-rows: 1fr;}
    section.short-links div.link-group .accordion {display:grid; transition: all 0.5s;}
    section.short-links div.link-group .accordion ul {overflow: hidden;}
    section.short-links div.link-group .accordion ul li a {padding:10px 5px 10px 15px}


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