@charset "UTF-8";

#outlook a {
    padding: 0;
}
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

/*****************
common 
*****************/
:root {
    --darkBlue: #1F2C5C;
    --blue: #1D50A2;
    --edionBlue: #2A5CAA;
    --lightBlue: #059DDE;
    --orange: #FEA750;
    --white: #FFF;
    --yellow: #FFF100;
    --markerYellow: #F4E575;
}

body {
    width: 100% !important;
    margin: 0 auto;
    padding: 0;
    background: var(--white);
    font-family: "Noto Sans JP", sans-serif;
}

html {
    font-size: 62.5%;
    font-weight: 700;
    line-height: 1.5;
    color: var(--darkBlue);
    text-align: center;
}

a:hover {
    opacity: 0.6;
}

img {
    border: 0 none;
    outline: 0 none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

span {
    color: var(--lightBlue);
}

strong {
    color: var(--orange);
}

.fw5 {
    font-weight: 500;
}

.fw7 {
    font-weight: 700;
}

b {
    font-weight: 700;
}

.mt1 {
    margin-top: 1%;
}

.mt2 {
    margin-top: 2%;
}

.mt3 {
    margin-top: 3%;
}

.mt4 {
    margin-top: 4%;
}

.mt5 {
    margin-top: 5%;
}

.mt6 {
    margin-top: 6%;
}

.mt8 {
    margin-top: 8.5%;
}

.mt10 {
    margin-top: 10%;
}

.mt11 {
    margin-top: 11%;
}

.txt_l {
    text-align: left;
}

.txt_r {
    text-align: right;
}
.cleaning_img{
width:85%;
}


.btn {
    display: block;
    background-color: var(--orange);
    color: var(--white);
    font-size: clamp(1.18rem, 3.7vw, 2.44rem);
    font-weight: 500;
    border-radius: 50px;
    padding: 3% 0 3.5%;
    margin: 6.5% 12% 0;
    position: relative;
}

.btn::before,
.btn::after {
	content: "";
	width: 3.5%;
	height: 3.5%;
	display: inline-block;
	border-radius: 10px;
	background-color: var(--white);
	position: absolute;
	right: 7%;
}

.btn::before {
	top: 41.5%;
	transform: rotate(45deg);
}

.btn::after {
	bottom: 41.5%;
	transform: rotate(-45deg);
}

.btn:hover {
    color: var(--white) !important;
}

.notes {
    font-size: clamp(1rem, 2.2vw, 1.45rem);
    color: color-mix(in srgb, var(--darkBlue) 70%, var(--white));
    font-weight: 500;
}

/* デフォルトの三角形アイコンを消す */
summary {
    display: block;
}
summary::-webkit-details-marker {
    display: none;
}

/*****************
sideArea 
*****************/
.sideArea__left {
    display: none;
}

.sideArea__right {
    background-color: var(--white);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 100;
    transform: translateX(200%);
    transition: transform 0.7s;
    display: flex;
    align-items: center;
}

.sideArea__right.active {
    transform: translateX(0);
}

.sideNav__header {
    display: block;
    width: 100%;
    padding: 2% 7%;
    position: absolute;
    top: 0;
}

.sideNav__btn {
    display: block;
    width: 6%;
    margin: 0 0 0 auto;
}

.sideNavTop img {
    width: 84.5%;
}

.sideNav__list {
    width: 80%;
    margin: 5% auto 0;
}

.sideNav__item {
    text-align: left;
    padding: 2% 0 2.5%;
}

.sideNav__item:nth-of-type(2) {
    padding-top: 7%;
    border-top: 2px solid var(--darkBlue);
}

.sideNav__item:nth-of-type(3) {
    padding-right: 4.5%;
}

.sideNav__item:nth-of-type(5) {
    padding-bottom: 7%;
    border-bottom: 2px solid var(--darkBlue);
}

.sideNav__item--top {
    padding: 0 0 2.5%;
}

.sideNav__item--bottom {
    padding: 0 4%;
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sideNav__item a {
    font-size: clamp(1.2rem, 3.5vw, 2.3rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s;
}

.sideNav__item a span {
    display: block;
    font-size: 0.7em;
    color: var(--darkBlue);
    margin-bottom: -2%;
}

.sideNav__item--bottom a:first-of-type {
    width: 43%;
}

.sideNav__item--bottom a:nth-of-type(2) {
    width: 50%;
}

.sideNav__item--middle img {
    width: 9%;
    margin-right: 5%;
}

.sideNav__item--middle:nth-of-type(5) img {
    width: 12.5%;
    margin-left: -3.5%;
}

.sideNav__item--top img {
    margin: 0 auto;
    width: 85%;
}

.sideNav__item--middle.current {
    color: var(--orange);
}

.sideNav a:hover {
    transform: scale(1.15);
    transition: transform 0.45s;
    opacity: 1;
}

.more {
    width: 73%;
    border: 3px solid var(--darkBlue);
    border-radius: 25px;
    padding: 5.5% 2%;
    margin: 13% auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.more__ttl {
    width: 65%;
    margin: -20.5% auto 0 3%;
    position: relative;
}

.more__ttl::before {
    display: block;
    content: '';
    border-bottom: 2px solid var(--darkBlue);
    width: 145%;
    position: absolute;
    bottom: 8%;
    left: 0;
}

.more__ttl::after {
    display: block;
    content: '';
    background: url(../img/guide.png) no-repeat top left / cover;
    width: 40%;
    height: 100%;
    position: absolute;
    top: -10%;
    right: -40%;
}

.more__list {
    text-align: left;
    padding-top: 5%;
    margin-top: -3%;
}

.more__list > li + li {
    margin-top: 0.5em;
}

.more__item {
    margin: 0 auto;
}

.more__item a {
    display: block;
    font-size: clamp(1.3rem, 3vw, 2rem);
    color: var(--blue);
    transition: transform 0.45s;
}

.more__item a span {
    display: block;
    font-size: clamp(0.9rem, 2.7vw, 1.8rem);
    color: #C8C8C8;
    margin-left: 0.5em;
    font-weight: 500;
}

/*****************
mainContent
*****************/
.mainContent {
    max-width: 660px;
    margin: 0 auto;
}

/* header */
.header {
    /* padding: 0 0 8.5%; */
}

.header__top {
    padding: 0 5.6%;
    width: 100%;
    height: 9.8vw;
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 99;
}

.header__logo{
    width: 14%;
}

.header__btn {
    width: 8.5%;
}

.header__ttl {
    margin: 0 auto;
    padding: 8vw 7.8% 0;
}

/* コンテンツ */
.article {
    padding: 12.9% 3.3% 7%;
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
}

.section {
    padding: 11.5% 4%;
    background-color: var(--white);
    border-radius: 18px;
    margin-top: 8%;
}

.section.fadeUp:not(:first-of-type) {
    opacity: 1;
    animation: fadeUp 0.5s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pin_area {
    background-color: color-mix(in srgb, var(--lightBlue) 20%, var(--white));
    padding: 1.5% 0 1%;
    margin-top: 11.5%;
    position: relative;
}

.pin_area::before {
    display: block;
    content: '';
    background: url(../img/pin.png) no-repeat top left / cover;
    width: 6.5%;
    height: 52%;
    position: absolute;
    top: -33%;
    left: 41%;
}

/* footerNav  */
.footerNav {
    padding: 5% 4.7%;
}

.footerNav__list {
    margin-top: 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footerNav__item {
    width: 48%;
    margin-top: 3%;
}

.bottomTxt {
    padding: 0 7% 3%;
}

/* footer  */
.footer {
    text-align: center;
    padding: 0 5% 3%;
}

address,
small {
    font-size: 2vw;
    margin-top: 8px;
}

small {
    color: #606060;
}

/*****************
ボタン
*****************/
/* ページトップボタン */
.pageTop {
    position: fixed;
    right: 1%;
    z-index: 99;
    opacity: 0;    /*はじめは非表示*/
    transform: translateY(80px);
}

.pageTop a {
    border-radius: 5px;
    background-color: var(--blue);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageTop a img {
    width: 60%;
}

/* 上に上がる動き */
.pageTop.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 下に下がる動き */
.pageTop.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(300px);
    }
}

/* フロートボタン */
.btnArea {
    max-width: 660px;
    background: #fff;
    box-shadow: 0px -3px 2px -2px #606060;
    padding: 3% 0;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 99;
    margin: 0 auto;
}

.floatArea {
    display: flex;
    justify-content: center;
    gap: 0 1%;
    margin: 0 auto;
}


/******** タブレット ********/
@media (661px < width) {

    .sideArea__right,
    .mainContent {
        width: 660px;
    }

    .header__top {
        width: 660px;
        height: 65px;
        padding:0 5% 0 3%;
    }

    address,
    small {
        font-size: 1.3rem;
        margin-top: 8px;
    }
}


/******** PC ********/
@media (999px < width) {
    .btnArea {
        display: none;
    }

    .sideArea {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: flex-end;
        position: fixed;
    }

    .sideArea__right {
        transform: translateX(0);
        position: static;
        width: calc(100% - 660px);;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .sideNav__header,
    .sideNavTop {
        display: none;
    }

    .sideNav__list {
        margin-top: 0;
    }

    .sideNav__item a {
        font-size: 1.9rem;
    }

    .more {
        margin-top: 15%;
        padding: 7% 2% 5%;
    }

    .more__ttl {
        margin-top: -18% ;
    }

    .more__item a {
        font-size: clamp(1.6rem, 1.6vw, 1.9rem);
    }

    .more__item a span {
        font-size: clamp(1.4rem, 1.4vw, 1.6rem);
    }

    .mainContent {
        margin: 0 auto 0 0;
        border-right: 3px solid var(--darkBlue);
    }

    .header__top {
        position: static;
        height: 65px;
        border-right: 3px solid var(--darkBlue);
    }

    .header__btn {
        display: none;
    }

    .header__ttl {
        padding-top: 0;
    }
}

@media (1299px < width) {
    .sideArea {
        justify-content: space-between;
    }

    .sideArea__left {
        width: calc(100% - 1050px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .logo {
        width: 8%;
        position: absolute;
        top: 3%;
        left: 3.5%;
    }

    .kv {
        width: 63%;
    }

    .sideArea__right {
        width: 390px;
    }

    .sideNav__item--bottom {
        padding-left: 5%;
    }

    .more__item {
        width: 100%;
    }

    .main {
        position: relative;
    }

    .mainContent {
        position: absolute;
        top: 0;
        right: 390px;
        border-left: 3px solid var(--darkBlue);
    }

    .header__top {
        display: none;
    }

    .pageTop  {
        width: 3vw;
        height: 3vw;
        right: 3%;
    }
    
    .pageTop::before {
        width: 1.5vw;
        height: 1.5vw;
        border-top: 0.4vw solid var(--white);
        border-right: 0.4vw solid var(--white);
    }
}

@media (1439px < width) {
    .sideArea__left {
        width: calc((100% - 660px)/2);
    }

    .kv {
        width: 64%;
        max-width: 400px;
    }

    .sideArea__right {
        width: calc((100% - 660px)/2);
    }

    .sideNav__item a {
        font-size: 2.2rem;
    }

    .mainContent {
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}