@charset "UTF-8";
/*!
Skin Name: パステル - レッド
Skin URI: https://www.xserver.ne.jp/
Author: XSERVER Inc.
Author URI: https://www.xserver.ne.jp/
Description: 優しいパステル調のデザインスキンです。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: xwrite
*/

:root {
    --key-color: #557396; /* キーカラー */
    --txt-color: #333333; /* テキストカラー */
    --link-color: #557396; /* リンクカラー */
    --headbg-color: transparent; /* ヘッダー背景色 */
    --headnav-color: #eb827a; /* ヘッダーメニューカラー */
    --noticebg-color: #eb827a; /* 通知エリア背景色 */
    --noticetxt-color: #ffffff; /* 通知エリアテキストカラー */
    --footbg-color: #eb827a; /* フッター背景色 */
    --foottxt-color: #ffffff; /* フッターテキストカラー */
    --background-color: transparent; /* サイト全体の背景色 */
    --header-textcolor: #557396; /* ヘッダーテキストカラー（タイトル+ディスクリプション） */
}

body {
    background-color: var(--background-color);
    background-image: url(./images/bg.png);
    background-position: top 0 left 20%;
}

header .gNavList > li:last-child {
    margin-right: 0;
}

.header {
    position: relative;
    margin-bottom: 30px;
}

body:not(:has(.header-notice)) .header::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -30px;
    right: 0;
    left: 0;
    height: 30px;
    background-color: var(--headbg-color);
    -webkit-mask-image: url(./images/wave2.svg);
    mask-image: url(./images/wave2.svg);
}

.header .headerImage + .siteInfo {
    position: absolute;
    top: -300px;
    right: 0;
    left: 0;
    margin: auto;
}

.header .gnav {
    padding: 0 30px;
    border-radius: 30px;
    background-color: var(--background-color);
    font-size: 1.3rem;
}

.header .headerImage + .home .header .gnav {
    top: 60px;
}

.header .nav__drawers {
    margin: 0 auto;
}

.header-notice {
    position: relative;
    z-index: 9;
    margin-top: -30px;
}

.mainVisual .slick-track {
    width: auto;
}

.mainVisual {
    padding-top: 40px;
    margin-bottom: 30px;
    width: 100%;
    height: 70vw;
    max-height: 750px;
    background-color: #fff;
}

.mainVisual::before {
    content: '';
    display: block;
    position: absolute;
    top: -30px;
    right: 0;
    left: 0;
    height: 30px;
    background-color: #fff;
}

.mainVisual::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -30px;
    right: 0;
    left: 0;
    height: 30px;
    background-color: #fff;
    -webkit-mask-image: url(./images/wave2.svg);
    mask-image: url(./images/wave2.svg);
}

.mainVisual .item__info {
    top: 3%;
    left: 50px;
    width: 70%;
    max-width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    z-index: 20;
}

.mainVisual .item__info--caption {
    max-width: 300px;
    line-height: 1.5;
    color: var(--key-color);
    text-align: left;
}

.mainVisual .item__info--text {
    max-width: 300px;
    margin: 40px 0;
    color: var(--key-color);
    font-size: 14px;
    text-align: justify;
}

.mainVisual .item__info--link {
    margin: 0;
}

.mainVisual .item__info--link .btn {
    background: var(--headnav-color);
    border-radius: 30px;
}

.mainVisual .item__image {
    position: relative;
}

.mainVisual .item__image::before {
    display: inline-block;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: url('./images/bg-mask.png') left / contain;
    content: '';
}

.mainVisual .item__image img {
    width: 100vw;
    max-width: 1200px;
    height: calc(666 * (100vw / 1200));
}

.mainVisual .slick-dots {
    bottom: 10px;
    left: 110px;
}

.mainVisual .slick-dots button {
    background: var(--headnav-color);
    opacity: 0.29;
}

.mainVisual .slick-dots > li.slick-active button {
    background: var(--headnav-color);
    opacity: 1;
}

.mainVisual .slick-arrow {
    width: 17.5px;
    height: 36px;
    margin-top: -18px;
    background: url(./images/ico_slider_arrow.png) no-repeat 0 0;
    background-size: 35px auto;
}

.footer {
    margin-top: 45px;
}

.footer::before {
    display: inline-block;
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: var(--footbg-color);
    -webkit-mask-image: url(./images/wave.svg);
    mask-image: url(./images/wave.svg);
    content: '';
}

/* タイトル、ナビの位置を画像分もとに戻す */
.single .header .headerImage + .siteInfo {
    top: 0;
}

.single .header .gnav {
    top: 0;
}

.page-template-default .header .headerImage + .siteInfo {
    top: 0;
}

.page-template-default .header .gnav {
    top: 0;
}

.archive .header .headerImage + .siteInfo {
    top: 0;
}

.archive .header .gnav {
    top: 0;
}

.type-card .xw-article-media .xw-article-media__body--title {
    margin-top: 5px;
}

.type-card .xw-article-media, .type-list .xw-article-media {
    border-radius: 30px;
    background-color: #fff;
}

.type-list .xw-article-media {
    padding: 15px;
}

.type-card .xw-article-media .xw-article-media__body {
    padding: 15px;
}

.type-card .articleList__item--fig {
    border-radius: 30px 30px 0 0;
}

.type-list .articleList__item--fig {
    border-radius: 20px;
}

.contents {
    margin-top: 30px;
}

.header-notice + .contents {
    margin-top: 0;
}

.articleList .articleList__item .article-category .list-label {
    border-radius: 30px;
}

.articlePager {
    background: #fff;
    border-radius: 15px;
    border-top: none;
    border-bottom: none;
}

.articlePager a:hover {
    border-radius: 15px;
}

.articlePagerUnit.type_1 .articlePager.prev .articlePager__caption {
    border-radius: 15px 0 0 15px;
}

.articlePagerUnit.type_1 .articlePager.next .articlePager__caption {
    border-radius: 0 15px 15px 0;
}

.side .profile {
    border-radius: 30px;
    background-color: #fff;
}

.side .profile__bg img {
    border-radius: 30px 30px 0 0;
}

.side .profile__sns .btn__sns {
    color: var(--key-color);
}

.articleHeader__title {
    border-bottom: 1px solid #ccc;
}

.contentsHeader {
    padding: 0 0 10px;
    border-top: none;
    border-bottom: 1px solid #ccc;
    background: none;
}

.notfound {
    border: none;
    border-radius: 20px;
}

.btnComment {
    padding: 5px 10px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #fff;
    font-size: 1.2rem;
}

.btnComment i {
    margin: 0 5px 0 0;
}

.adsArea .container {
    background: transparent;
}

.post-thumbnail img {
    border-radius: 20px;
}

.toc_block {
    border-radius: 20px;
}

.container + .adsArea {
    padding-bottom: 30px;
}

.page-top-breadcrumbs{
	padding-top: 30px;
}

.page-bottom-breadcrumbs + footer{
	margin-top: 0;
}

@media (max-width: 991.98px) {
    .header .headerImage img {
        margin: 120px auto 0;
    }

    .header .headerImage {
        min-height: 100px;
    }

    .header .headerInfo {
        padding: 0;
    }

    .header .siteInfo {
        bottom: auto;
    }

    .header .headerImage + .siteInfo {
        top: 15px;
        left: 15px;
    }

    .headerDesc {
        display: none;
    }

	.page-top-breadcrumbs, .page-bottom-breadcrumbs{
		padding: 8px calc(2.5vw + 15px);
		max-width: 100%;
	}
}

@media (max-width: 575.98px) {
    .articleHeader__title {
        font-size: 2.2rem;
    }

    .mainVisual {
        margin-top: 30px;
        height: 65vw;
    }

    .mainVisual .item__info--caption {
        width: 130px;
    }
}

@media (min-width: 576px) {
    .mainVisual {
        height: 62vw;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .mainVisual .item__info--caption {
        width: 180px;
        font-size: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .mainVisual .item__info {
        top: 0;
        left: 70px;
        width: 100%;
    }

    .mainVisual .item__info--caption {
        font-size: 2.1rem;
        max-width: 200px;
    }

    .mainVisual .item__info--text, .mainVisual .item__info--link {
        display: block;
        max-width: 200px;
    }
}

@media (min-width: 992px) {
    .header {
        font-size: 1.2rem;
        min-height: 100px;
        padding-top: 10px;
    }

    .header .headerInfo {
        align-items: center;
        padding-top: 0;
    }

    .header .siteInfo__desc {
        max-width: 320px;
        padding-top: 5px;
    }

    .header .gNavList > li {
        margin: 0 10px;
        padding: 10px 0;
    }

    .mainVisual .item__info {
        top: 160px;
        left: 90px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .header .gnav {
        top: 0;
    }
}

@media (min-width: 1199.98px) {
    .mainVisual .slick-arrow.slick-prev {
        margin-left: -710px;
    }

    .mainVisual .slick-arrow.slick-next {
        margin-right: -710px;
    }

    .mainVisual .item__image img {
        height: 666px;
    }

    .mainVisual .slick-dots {
        left: calc((100vw - 1200px) / 2 + 110px);
    }

    .mainVisual .slick-slide:not(.slick-center) {
        filter: opacity(0%);
        transition: .2s linear;
    }
}

/*固定ページ一覧ブロック*/
.pageArticleList .xw-article-media {
    padding: initial;
    border-radius: initial;
    background-color: initial;
}