@charset "UTF-8";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

body {
    line-height: 1.7;
    /* 文字の大きさ（font-size）とその文字の上下の余白 */
    font-size: 17px;
    /* font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
    font-family: Helvetica, "Hiragino Sans", Arial, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont;
    color: #000;
}

/* a要素はハイパーリンク（hyperlink）を設定する */
a,
a {
    text-decoration: none;
    /* aタグの下線を取る（画像多用に対する隙間対策、保険的に入れる） */
}

a:link {
    /* 未訪問リンク */
    /* color: #7f7fff; */
    color: #0000cd;
}

a:hover {
    /* a要素（AMATERASU）にマウスポインターが乗った時のスタイルを指定 */
    text-decoration: none;
    color: #E8C115;
    transition: all 0.3s linear;
}

/* header */
header {
    display: flex;
}

header h1 {
    margin: 8px 0 0 20px;
    /* logoの上marginを8px・左marginを20pxに設定 */
    font-family: geller-headline, serif;
    font-weight: 700;
    font-style: normal;
}

header h1 a {
    color: #0000cd;
    /* color: #6252B7; */
    /* AMATERASUのテーマカラー */
}

header nav {
    margin: 0 0 0 auto;
}

header nav ul {
    list-style-type: none;
    margin: 15px 15px 15px 0;
    /* navigation menuの上右下marginを15pxに設定 */
    padding: 0;
    display: flex;
    /* color: #FFDDFF; */
}

header nav ul li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
}

header nav ul li a:link {
    /* 未訪問リンク */
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
}

.home header nav ul li:first-child a {
    /* Home */
    /* color: #FF7EFF; */
    /* color: #000080; */
    color: #008000;

}

header nav ul li a:hover {
    color: #E8C115;
    transition: all 0.1s linear;
}

header nav ul li:last-child a:hover {
    /* Access */
    color: #E8C115;
    transition: all 0.1s linear;
}

@media screen and (max-width:834px) {
    header {
        display: block;
    }

    header h1 {
        margin: 10px 0 0;
        /* 上 右左 下 */
        text-align: center;
        /* テキストを水平方向中央寄せに配置する */
    }

    /* header img {
        width: 150px;
    } */
    /* ロゴの幅 */

    header nav ul {
        margin: 0;
        flex-wrap: wrap;
        /* フレックスアイテムを単一行から複数行に折り返す */
    }

    header nav ul li {
        width: 20%;
        /* リスト幅20%（1/5）で５つのリストを配置する */
        /* リスト幅25%（1/4）で４つのリストを配置する */
    }

    header nav ul li:last-child {
        width: 100%;
    }

    header nav ul li a,
    header nav ul li a:link {
        padding: 5px 0;
        /* 834px以下でAccessの上下paddingを5pxに設定 */
        /* 上下 右左 */
        text-align: center;
    }

    header nav ul li:last-child a {
        background: #F6F6F6;
        color: #000;
        /* color: #fff; */
        /* Accessのbackgroundとテキストcolor */
    }
}

/* main visual */

.atopic-eczema-oil .atopic-eczema-oil-mv img,
.site-map .site-map-mv img,
.links .links-mv img,
.law .law-mv img,
.corporate .corporate-mv img,
.privacy-policy .privacy-policy-mv img,
.rule .rule-mv img,
.social-media .social-media-mv img,
.contact .contact-mv img,
.faq .faq-mv img,
.customer-reviews .customer-reviews-mv img,
.payment .payment-mv img,
.apply .apply-mv img,
.reserve .reserve-mv img,
.access .access-mv img,
.shop .shop-mv img,
.school .school-mv img,
.message .message-mv img,
.salon .salon-mv img,
.home-mv img {
    max-width: 100%;
    height: auto;
}

.atopic-eczema-oil .atopic-eczema-oil-mv,
.site-map .site-map-mv,
.links .links-mv,
.law .law-mv,
.corporate .corporate-mv,
.privacy-policy .privacy-policy-mv,
.rule .rule-mv,
.social-media .social-media-mv,
.contact .contact-mv,
.faq .faq-mv,
.customer-reviews .customer-reviews-mv,
.payment .payment-mv,
.apply .apply-mv,
.reserve .reserve-mv,
.access .access-mv,
.shop .shop-mv,
.school .school-mv,
.message .message-mv,
.salon .salon-mv,
.home-mv {
    /*親div*/
    position: relative;
    /*相対配置*/
}

.atopic-eczema-oil .atopic-eczema-oil-mv h2,
.site-map .site-map-mv h2,
.links .links-mv h2,
.law .law-mv h2,
.corporate .corporate-mv h2,
.privacy-policy .privacy-policy-mv h2,
.rule .rule-mv h2,
.social-media .social-media-mv h2,
.contact .contact-mv h2,
.faq .faq-mv h2,
.customer-reviews .customer-reviews-mv h2,
.payment .payment-mv h2,
.apply .apply-mv h2,
.reserve .reserve-mv h2,
.access .access-mv h2,
.shop .shop-mv h2,
.school .school-mv h2,
.message .message-mv h2,
.salon .salon-mv h2,
.home-mv h2 {
    /* 画像の上に乗るテキスト"新しき道を開く天界からの導きをお伝えします" */
    position: absolute;
    /*絶対配置*/
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    color: #FFF;
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 30px;
    font-weight: bold;
}

/* main */

main .contents {
    margin: 0 auto;
}

.home main .contents p {
    /* p 日常生活での問題や病気などにより… */
    /* font-size: 16px; */
    padding-top: 30px;
    text-align: left;
    /* home・salonのPageに適用 */
}

main .news h2 {
    /* h2 News お知らせ */
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 25.5px;
    /* font-weight: bold; */
    /* font-weight: 900; */
    text-align: center;
}

main .news ol {
    /* width: 100%; */
    list-style: none;
    /* ビュレット（リストのマーク：1.）を非表示にする */
    padding-left: 0;
    /* 左側のパディングを0にする */
    padding-left: 5px;
    /* パディングを親要素に適用にする */
}

main .news ol li {
    /* display: flex; */
    padding: 10px 0;
    border-bottom: solid 1px #ccc;
    margin: 0;
    /* padding: 10px 0 10px 15%; */
}

main .news ol li span {
    /* display: flex; */
    padding-left: 10px;
    /* newsテキスト先頭のpadding 10px */
}

main .news ol li span a {
    /* 詳細はこちら */
    /* color: #4b0082; */
    color: #0000cd;
}

/* main .news ol li:first-child span {} */
main .news ol li:nth-child(4) span {
    /* 詳細はこちら */
    /* color: #4b0082; */
    color: #cd0000;
}

main .news ol li span a:hover {
    /* a要素にマウスポインターが乗った時のスタイルを指定 */
    color: #e8cf5d;
    /* E8C115より薄いゴールド */
    transition: all 0.1s linear;
}

/* main-contents */
.main-contents ul {
    display: flex;
    /* 親要素に適用すると子要素（li）が並列になる */
    flex-wrap: wrap;
    /* フレックスアイテムを単一行から複数行に折り返す */
}

.main-contents h3 {
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px 0;
    /* home・salonのページにスタイルが適用 */
}

.main-contents li {
    max-width: 48%;
    /* max-width 48%で１カラムになる */
    /* 47%以下では480px以下で１カラムにならない */
    margin: 0 auto;
    /* 画像と画像の間のmarginをautoに設定 */
}

.main-contents dl img {
    max-width: 100%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
    transition-duration: 1s;
    /* 1sでゆっくりと戻る */
}

.main-contents dl dd {
    /* 心と身体のお悩みに耳を傾け… */
    /* font-size: 17px; */
    /* line-height: 1.7; */
    margin: 0 15px;
}

.main-contents dl dt a img:hover {
    /* Salon サロン等main contentsの画像が浮き上がる */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(-10px);
    transition-duration: 0.5s;
}

.main-contents dl dt a img:hover {
    /* Salon サロン等main contentsの画像が明るくなる */
    opacity: 0.6;
    transition-duration: 0.3s;
}

.main-contents li a {
    /* ▶ More */
    /* font-size: 17px; */
    /* line-height: 1.7; */
    /* background-color: var(--main); */
    /* color: #4b0082; */
    color: #000080;
    transition: all 1.0s linear;
    /* 1.0sでゆっくりと戻る */
}

.main-contents li span a:hover {
    /* ▶ More */
    color: #e8cf5d;
    /* E8C115より薄いゴールド */
    transition: all 0.1s linear;
    margin: 0 0 0 15px;
}

main {
    padding: 0 15px;
}

/* footer */
.footer-menu {
    display: flex;
    /* 親要素に適用すると子要素（menu-part）が並列になる */
    flex-wrap: wrap;
    /* フレックスアイテムを単一行から複数行に折り返す */
    justify-content: space-between;
    /* menu-partが左右均等分布 */
    padding: 0 30px;
    line-height: 1.9;
}

.menu-part-03,
.menu-part-02,
.menu-part-01 {
    align-items: center;
    /* menu-part内の要素（menu）を縦軸方向で中央に整列 */
    width: calc(33.3% - 10px);
    /* menu-partの幅1/3 */
    margin: 0 5px 15px 5px;
}

.menu-part-03 ul li a,
.menu-part-02 ul li a,
.menu-part-01 ul li a {
    color: #000;
    font-size: 16px;
}

.menu-part-03 ul li a:hover,
.menu-part-02 ul li a:hover,
.menu-part-01 ul li a:hover {
    text-decoration: underline;
    /* color: #e8cf5d; */
    transition: all 0.1s linear;
}

ul {
    list-style: none;
    /* ビュレット（リストのマーク：disc ●）を非表示にする */
    padding-left: 0;
    /* 左側のパディングを0にする */
    padding-left: 5px;
    /* パディングを親要素に適用にする */
}

@media (max-width: 834px) {

    .menu-part-03,
    .menu-part-02,
    .menu-part-01 {
        width: calc(50% - 10px);
        /* 834px以下で２カラムになる */
        margin: 0 5px 15px 5px;
    }

    .links .links-mv h2,
    .law .law-mv h2,
    .corporate .corporate-mv h2,
    .privacy-policy .privacy-policy-mv h2,
    .rule .rule-mv h2,
    .social-media .social-media-mv h2,
    .contact .contact-mv h2,
    .faq .faq-mv h2,
    .customer-reviews .customer-reviews-mv h2,
    .access .access-mv h2,
    .shop .shop-mv h2,
    .school .school-mv h2,
    .message .message-mv h2,
    .salon .salon-mv h2,
    .home-mv h2 {
        /* 画像の上に乗るテキスト"新しき道を開く天界からの導きをお伝えします" */
        font-size: 19px;
        margin: 0;
        padding: 0;
    }

    .links main h2,
    .law main h2,
    .corporate main h2,
    .privacy-policy main h2,
    .rule main h2,
    .social-media main h2,
    .contact main h2,
    .faq main h2,
    .customer-reviews main h2,
    .access main h2,
    .shop main h2,
    .school main h2,
    .message main h2,
    .salon main h2,
    /* セッションについて・その他 */
    .home .news h2 {
        font-size: 19px;
    }

    .salon .main-contents h3,
    /* Heart care 心のケア・Body care 身体のケア */
    .home .main-contents h3 {
        font-size: 19px;
        /* 24px→19px home・salonのページにスタイルが適用 */
    }

    .links main h3,
    .law main h3,
    .corporate main h3,
    .privacy-policy main h3,
    .rule main h3,
    .social-media main h3,
    .contact main h3,
    .faq main h3,
    .customer-reviews main h3,
    .access main h3,
    .shop main h3,
    .school main h3,
    .message main h3,
    .salon .session-info h3 {
        /* 料金・お支払い方法・その他 */
        font-size: 16px;
        /* 19.89px→16px */
    }

    .home .footer-menu ul li a {
        font-size: 14px;
    }

}

@media (max-width: 520px) {

    .menu-part-03,
    .menu-part-02,
    .menu-part-01 {
        width: calc(100% - 10px);
        /* 520px以下で１カラムになる */
        margin: 0 5px 15px 5px;
    }

    .atopic-eczema-oil .atopic-eczema-oil-mv h2,
    .links .links-mv h2,
    .law .law-mv h2,
    .corporate .corporate-mv h2,
    .privacy-policy .privacy-policy-mv h2,
    .rule .rule-mv h2,
    .social-media .social-media-mv h2,
    .contact .contact-mv h2,
    .faq .faq-mv h2,
    .customer-reviews .customer-reviews-mv h2,
    .access .access-mv h2,
    .shop .shop-mv h2,
    .school .school-mv h2,
    .message .message-mv h2,
    .salon .salon-mv h2,
    .home-mv h2 {
        /* 画像の上に乗るテキスト"新しき道を開く天界からの導きをお伝えします" */
        font-size: 12px;
        margin: 0;
        padding: 0;
    }

    .menu-part-03 ul li a,
    .menu-part-02 ul li a,
    .menu-part-01 ul li a {
        font-size: 14px;
    }
}

/* @media (max-width: 250px) { */
/* .copyright p { */
/* display: none; */
/* } */
/* } */

.sns {
    /* snsの帯（div） */
    height: 30px;
    line-height: 30px;
    align-items: center;
    display: flex;
    /* 親要素に適用すると子要素（sns）が並列になる */
    /* フレックスボックスレイアウトを使用するには親要素に「display: flex;」を指定します。 */
}

.sns ul {
    display: flex;
    /* snsが並列になる */
    padding-left: 30px;
}

.sns ul a {
    color: #000;
}

.sns ul img {
    height: 25px;
    margin: 15px 15px 0 0;
}

.sns ul img:hover {
    opacity: 0.6;
    transition-duration: 0.3s;
}

.copyright {
    /* 2022 AMATERASU Inc. */
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* background: #dddddd; */
    background: #F6F6F6;
}

.copyright p {
    color: #000;
    margin: 0;
}

/* _______________________________________________________________________________ */

/* Salon */

.salon-mv img {
    max-width: 100%;
    height: auto;
}

.salon-mv {
    /*親div*/
    position: relative;
    /*相対配置*/
}

.salon-mv h2 {
    /* 画像の上に乗るテキスト"新しき道を開く天界からの導きをお伝えします" */
    position: absolute;
    /*絶対配置*/
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    color: #FFF;
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 30px;
    font-weight: bold;
}

.salon .contents p {
    /* 今までの悩みや迷いに終止符を打ち、新しき希望の道が開けていきます。 */
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 25.5px;
    font-weight: bold;
    /* font-weight: 900; */
    text-align: center;
    color: #C1AB05;
    /* アンティックゴールド（Antique gold） */
    /* color: #E8C115; */
}

/* main */

main h2 {
    /* h2 セッションについて・所在地・営業時間・アクセスについて・Video for Self-Care セルフケアのための動画（＊現在、動画は制作中です） */
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 25.5px;
    /* font-weight: bold; */
    /* font-weight: 900; */
    text-align: center;
}

.salon header nav ul li:nth-child(2) a {
    /* Salon */
    /* color: #FF7EFF; */
    /* color: #000080; */
    color: #008000;
}

.session-info {
    padding: 0 30px;
}

/* _______________________________________________________________________________ */

/* Message */

.message header nav ul li:nth-child(3) a {
    /* Message */
    /* color: #FF7EFF; */
    /* color: #000080; */
    color: #008000;
}

.message main .self-care h2 {
    /* Video for Self-Care セルフケアのための動画（＊現在、動画は制作中です） */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.message main .self-care h3 {
    /* 心と身体の健康を自己管理（セルフケア）するためのビデオ */
    text-align: center;
}

.message main .massage,
.message main .self-care,
.message main .hand-therapist,
.message main .aroma-advisor {
    text-align: center;
    /* ４枚の画像をセンタリング */
}

.message main .massage h3 {
    /* [オンライン講座の受講方法について] */
    text-align: left;
}

.message main .massage p,
.message main .hand-therapist p,
.message main .aroma-advisor p,
.message main .self-care p {
    /* 日常生活での問題や病気などにより… */
    text-align: left;
    /* padding-left: 0.5em; */
    /* text-indent: -0.5em; */
    /* テキストの行頭を揃える */
}

.message main .self-care ul,
.message main .massage ul {
    /* Vol.1「自分が好きになれない」と思う方へ */
    text-align: left;
}

.message main .massage img,
.message main .self-care img,
.message main .hand-therapist img,
.message main .aroma-advisor img {
    max-width: 48%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
}

/* .message main .aroma-advisor p { */
/* AEAJアロマテラピーアドバイザー資格を取得する… */
/* } */

.message main table {
    /* 隣接するセルのボーダーを重ねて表示 */
    border-collapse: collapse;
}

.message main th {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

.message main td {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

main {
    padding: 0 30px;
}

/* _______________________________________________________________________________ */
/* School */

.school header nav ul li:nth-child(4) a {
    /* School */
    /* color: #FF7EFF; */
    /* color: #000080; */
    color: #008000;
}

.school main .aroma-school h2 {
    /* AMATERASUアロマセラピースクール（＊現在、開講の準備中です） */
    text-align: center;
}

.school main .aroma-school ul {
    /* AMATERASUアロマセラピースクールでは、… */
    text-align: left;
}

.school main .online-courses,
.school main .hand-therapist,
.school main .aroma-advisor,
.school main .contents {
    text-align: center;
    /* ４枚の画像をセンタリング */
}

.school main .online-courses h3 {
    /* [お申込方法]・[お支払い方法] */
    text-align: left;
}

.school main .online-courses p,
.school main .hand-therapist p,
.school main .aroma-advisor p,
.school main .aroma-test p {
    /* アロマテラピーの基礎をしっかりと学べます。… */
    text-align: left;
    /* padding-left: 0.5em; */
    /* text-indent: -0.5em; */
    /* テキストの行頭を揃える */
}

.school main .online-courses img,
.school main .hand-therapist img,
.school main .aroma-advisor img,
.school main .contents img {
    max-width: 48%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
}

/* .school main .aroma-advisor p { */
/* AEAJアロマテラピーアドバイザー資格を取得する… */
/* } */

.school main table {
    /* 隣接するセルのボーダーを重ねて表示 */
    border-collapse: collapse;
}

.school main th {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

.school main td {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

main {
    padding: 0 30px;
}

/* _______________________________________________________________________________ */
/* Shop（Online Shop オンラインショップ） */

.shop header nav ul li:nth-child(5) a {
    /* Square（スクエア）のサイトにジャンプする */
    /* Shop */
    color: #008000;
}

.shop main h3 {
    text-align: center;
}

/* main products */

.shop .products .skin-care-01 {
    display: flex;
    /* 親要素に適用すると子要素（menu-part）が並列になる */
    justify-content: space-between;
    /* menu-partが左右均等分布 */
}

.shop .products .skin-care-02 {
    display: flex;
    /* 親要素に適用すると子要素（menu-part）が並列になる */
    justify-content: flex-start;
}

.shop .products .mental-care-01 {
    display: flex;
    /* 親要素に適用すると子要素（menu-part）が並列になる */
    /* justify-content: flex-start; */
    justify-content: center;
}

.shop .products ul {
    /* display: flex; */
    /* 親要素に適用すると子要素（menu-part）が並列になる */
    /* flex-wrap: wrap; */
    /* フレックスアイテムを単一行から複数行に折り返す */
    /* justify-content: space-between; */
    /* menu-partが左右均等分布 */
    /* justify-content: flex-start; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
    /* justify-content: center; */
    /* margin: 0 auto; は、justify-content: space-around; に近い効果がある。行の後ろに margin: 0 auto; が記述されていると justify-content: space-between;・flex-start;・space-evenly;・center; 等が効かない。 */
    padding: 0 30px;
    line-height: 1.9;
}

.shop .products ul {
    /* align-items: center; */
    /* menu-part内の要素（menu）を縦軸方向で中央に整列 */
    /* width: calc(33.3% - 10px); */
    /* menu-partの幅1/3 */
    margin: 0 5px 15px 5px;
    /* margin: 上・右・下・左 */
}

.shop .products ul li a {
    color: #000;
    font-size: 16px;
}

.shop .products ul li a:hover {
    text-decoration: underline;
    /* color: #e8cf5d; */
    transition: all 0.1s linear;
}

.shop .products ul li {
    max-width: 32%;
    /* max-width 32%で全ての画像が同じ大きさになる */
    /* margin: 0 auto; は、justify-content: space-around; に近い効果がある。行の後ろに margin: 0 auto; が記述されていると justify-content: space-between;・flex-start;・space-evenly;・center; 等が効かない。 */
}

.shop .products dl img {
    max-width: 96%;
    /* 画像と画像の間隔をあける */
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
    transition-duration: 1s;
    /* 1sでゆっくりと戻る */
}

.shop .products li dl dt {
    /* Age-Defying Care Cream… */
    font-size: 16px;
    font-weight: 550;
    /* line-height: 1.7; */
    margin: 0 5px;
}

.shop .products li dl dd {
    /* 肌になめらかなハリと弾力を与え… */
    font-size: 16px;
    /* line-height: 1.7; */
    margin: 0 15px;
}

.shop .products li dl a img:hover {
    /* Salon サロン等main contentsの画像が浮き上がる */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(-10px);
    transition-duration: 0.5s;
}

.shop .products li dl dt a img:hover {
    /* Salon サロン等main contentsの画像が明るくなる */
    opacity: 0.6;
    transition-duration: 0.3s;
}

.shop .products li span a {
    /* ▶ More */
    /* font-size: 17px; */
    /* line-height: 1.7; */
    /* background-color: var(--main); */
    /* color: #4b0082; */
    /* color: #000080; */
    color: #008000;
    transition: all 1.0s linear;
    /* 1.0sでゆっくりと戻る */
}

.shop .products li span a:hover {
    /* ▶ More */
    color: #e8cf5d;
    /* E8C115より薄いゴールド */
    transition: all 0.1s linear;
    margin: 0 0 0 15px;
}

/* _______________________________________________________________________________ */
/* Access */

.access header nav ul li:nth-child(6) a {
    /* Access */
    /* color: #FF7EFF; */
    /* color: #000080; */
    color: #008000;
}

.access main .location h2 {
    /* 所在地・営業時間・アクセスについて */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.access main .online-courses,
.access main .hand-therapist,
.access main .aroma-advisor,
.access main .contents {
    text-align: center;
}

.access main .alphast img {
    max-width: 48%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
}

.access .alphast ul {
    display: flex;
    /* 親要素に適用すると子要素（li）が並列になる */
    flex-wrap: wrap;
    /* フレックスアイテムを単一行から複数行に折り返す */
}

.access .alphast h3 {
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px 0;
}

.access .alphast li {
    max-width: 48%;
    /* max-width 48%で１カラムになる */
    /* 47%以下では520px以下で１カラムにならない */
    margin: 0 auto;
    /* 画像と画像の間のmarginをautoに設定 */
}

.access .alphast dl img {
    max-width: 100%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
    transition-duration: 1s;
    /* 1sでゆっくりと戻る */
}

.access .alphast dl dd {
    /* 心と身体のお悩みに耳を傾け… */
    /* font-size: 17px; */
    /* line-height: 1.7; */
    margin: 0 15px;
}

.access main .alphast ul li span {
    color: #008000;
}

.access main table {
    /* 隣接するセルのボーダーを重ねて表示 */
    border-collapse: collapse;
}

.access main tr:nth-child(2) {
    /* 交通のご案内 */
    font-weight: bold;
}

.access main th {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

.access main td {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

.access main table span {
    color: #fff;
}

main {
    padding: 0 30px;
}

/* _______________________________________________________________________________ */
/* Customer Reviews */

.customer-reviews footer .menu-part-02 li:nth-child(2) a {
    /* Customer Reviews */
    color: #008000;
}

.sleep-quality-improvement-care-oil main .name,
.eczema-and-rough-skin-care-gel main .name,
.age-defying-care-cream main .name,
.herpes-zoster-oil main .name,
.cellulite-oil main .name,
.atopic-eczema-oil main .name {
    font-weight: 550;
    /* 住所とお名前にfont-weight: 550;を適用 */
    /* color: #FF0090; */
    /* color: #D6909D; */
    /* color: #F987C5; */
    /* color: #FBAED2; */
}

/* _______________________________________________________________________________ */
/* FAQ */

.faq footer .menu-part-02 li:nth-child(3) a {
    /* FAQ */
    color: #008000;
}

.faq main ul li {
    display: flex;
    padding: 0;
}

.faq main ul li:nth-child(even) {
    /* even 偶数 */
    border-bottom: solid 1px #ccc;
}

.faq main ul li p {
    margin: 10px 0;
    /* pの上下にmargin 10pxを適用 */
}



/* _______________________________________________________________________________ */
/* Contact */

.contact footer .menu-part-02 li:nth-child(4) a {
    /* Contact */
    color: #008000;
}

.contact main section h3,
.contact main section h2 {
    /* h2 Contact お問い合わせ */
    /* h3 お問い合わせフォーム */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.contact main section p {
    text-align: left;
}

/* _______________________________________________________________________________ */
/* Social Media */

.social-media footer .menu-part-02 li:nth-child(5) a {
    /* Social Media */
    color: #008000;
}

.social-media main section h2 {
    /* h2 AMATERASU公式ソーシャルメディア */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.social-media main section h3,
.social-media main section p {
    text-align: left;
    margin: 10px 0;
    /* pの上下にmargin 10pxを適用 */
}

/* _______________________________________________________________________________ */
/* Rule */

.rule footer .menu-part-03 li:first-child a {
    /* Rule */
    color: #008000;
}

.rule main section h2 {
    /* h2 AMATERASU公式ソーシャルメディア */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.rule main section h3,
.rule main section p {
    text-align: left;
    margin: 10px 0;
    /* pの上下にmargin 10pxを適用 */
}

/* _______________________________________________________________________________ */
/* Privacy Policy */

.privacy-policy footer .menu-part-03 li:nth-child(2) a {
    /* Privacy Policy */
    color: #008000;
}

.privacy-policy main section h2 {
    /* h2 有限会社アマテラス プライバシーポリシー（個人情報保護方針） */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.privacy-policy main section h3,
.privacy-policy main section p {
    text-align: left;
    margin: 10px 0;
    /* pの上下にmargin 10pxを適用 */
}


/* _______________________________________________________________________________ */
/* Corporate */

.corporate footer .menu-part-03 li:nth-child(3) a {
    /* Corporate */
    color: #008000;
}

.corporate main section h2 {
    /* h2 有限会社アマテラス プライバシーポリシー（個人情報保護方針） */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.corporate main section h3,
.corporate main section p {
    text-align: left;
    margin: 2.5px 0;
    /* pの上下にmargin 2.5pxを適用 */
}

.corporate main table {
    /* 隣接するセルのボーダーを重ねて表示 */
    border-collapse: collapse;
}

.corporate main th {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

.corporate main td {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

.corporate main section .president p {
    text-align: center;
    margin-top: 20px;
    /* pの上にmargin 20pxを適用 */
}

/* _______________________________________________________________________________ */
/* Law */

.law footer .menu-part-03 li:nth-child(4) a {
    /* Law */
    color: #008000;
}

.law main section h2 {
    /* h2 有限会社アマテラス プライバシーポリシー（個人情報保護方針） */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.law main section h3,
.law main section p {
    text-align: left;
    margin: 2.5px 0;
    /* pの上下にmargin 2.5pxを適用 */
}

.law main table {
    /* 隣接するセルのボーダーを重ねて表示 */
    border-collapse: collapse;
}

.law main th {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

.law main td {
    border-bottom: solid 1px #ccc;
    padding: 8px 10px 8px 5px;
}

/* _______________________________________________________________________________ */
/* Links */

.links footer .menu-part-03 li:nth-child(5) a {
    /* Links */
    color: #008000;
}

.links main section h2 {
    /* h2 LINKS リンクス */
    /* main h2でスタイルが適用 */
    text-align: center;
}

.links main section .member p {
    text-align: center;
}

.links main ul a,
.links main ul li {
    text-align: left;
    margin: 15px 0;
    /* pの上下にmargin 15pxを適用 */
}

.links main ul li:nth-child(even) {
    /* even 偶数 */
    border-bottom: solid 1px #ccc;
}

/* _______________________________________________________________________________ */
/* Agree 同意する ご予約フォーム */

body {
    padding: 0;
    /* margin: 10px; */
}

.container p {
    margin: 0;
}

p {
    margin: 0;
}

/* .container { */
/* padding: 10px; */
/* } */

input[type=checkbox] {
    margin: 15px 0px;
    color: #551A8B;
    /* color: #0000cd; */
}

input[type=button] {
    width: 220px;
    font-size: 18px;
    font-weight: 550;
    color: #551A8B;
    cursor: pointer;
    cursor: hand;
    font-family: "游明朝", serif,
        /* color: #0000cd; */
        /* color: #C1AB05; */
}

/* input[type="checkbox"]:checked + label { */
/* background: #31A9EE; */
/* チェック時の背景色を指定する */
/* color: #ffffff; */
/* チェック時のフォント色を指定する */
/* } */

/* _______________________________________________________________________________ */

@media screen and (max-width:834px) {

    /* print・speech以外のscreenを持ったデバイス：PC・スマホ */
    body {
        font-size: 14px;
    }
}

/* _______________________________________________________________________________ */

@media (max-width: 520px) {

    .shop main .products ul {
        flex-direction: column;
        /* 520px以下で１カラムに配置する */
    }

    .eczema-and-rough-skin-care-gel main .usage-result li,
    .sleep-quality-improvement-care-oil main .active-ingredient li,
    .eczema-and-rough-skin-care-gel main .active-ingredient li,
    .age-defying-care-cream main .active-ingredient li,
    .herpes-zoster-oil main .active-ingredient li,
    .cellulite-oil main .active-ingredient li,
    .atopic-eczema-oil main .active-ingredient li,
    .shop main .products li,
    .access main .alphast li,
    /* cssを丁寧に記述してスタイルを効かせる */
    .main-contents li {
        /* width: calc(100% - 10px); */
        /* 幅100%から10pxの固定幅を引いた数値を指定 */
        /* 520px以下で１カラムに配置する */
        /* flex-direction: column; */
        /* 520px以下で１カラムに配置する */
        margin: 5px;
        /* margin 5px以上で２カラムが１カラムになる（Home・access） */
        max-width: 100%;
        /* 520px以下で画像を含むliの幅が32%から100%になる */
        height: auto;
    }
}

/* _______________________________________________________________________________ */

/* atopic-eczema-oil等合計６製品 */

.sleep-quality-improvement-care-oil-mv img,
.eczema-and-rough-skin-care-gel-mv img,
.age-defying-care-cream-mv img,
.herpes-zoster-oil-mv img,
.cellulite-oil-mv img,
.atopic-eczema-oil-mv img {
    max-width: 100%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
    transition-duration: 1s;
    /* 1sでゆっくりと戻る */
}

.sleep-quality-improvement-care-oil-mv img:hover,
.eczema-and-rough-skin-care-gel-mv img:hover,
.age-defying-care-cream-mv img:hover,
.herpes-zoster-oil-mv img:hover,
.cellulite-oil-mv img:hover,
.atopic-eczema-oil-mv img:hover {
    /* Salon サロン等main contentsの画像が浮き上がる */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    transform: translateY(-10px);
    transition-duration: 0.5s;
}

.sleep-quality-improvement-care-oil-mv img:hover,
.eczema-and-rough-skin-care-gel-mv img:hover,
.age-defying-care-cream-mv img:hover,
.herpes-zoster-oil-mv img:hover,
.cellulite-oil-mv img:hover,
.atopic-eczema-oil-mv img:hover {
    /* Salon サロン等main contentsの画像が明るくなる */
    opacity: 0.6;
    transition-duration: 0.3s;
}

.sleep-quality-improvement-care-oil main .products p,
.eczema-and-rough-skin-care-gel main .products p,
.age-defying-care-cream main .products p,
.herpes-zoster-oil main .products p,
.cellulite-oil main .products p,
.atopic-eczema-oil main .products p {
    /* p Atopic Eczema Oil アトピー性湿疹 オイル… */
    /* font-size: 16px; */
    padding: 0px 0px 20px 0px;
    text-align: center;
    font-weight: 550;
    /* home・salonのPageに適用 */
}

/* main-contents */
.sleep-quality-improvement-care-oil main .active-ingredient ul,
.eczema-and-rough-skin-care-gel main .active-ingredient ul,
.age-defying-care-cream main .active-ingredient ul,
.herpes-zoster-oil main .active-ingredient ul,
.cellulite-oil main .active-ingredient ul,
.atopic-eczema-oil main .active-ingredient ul {
    display: flex;
    /* 親要素に適用すると子要素（li）が並列になる */
    flex-wrap: wrap;
    /* フレックスアイテムを単一行から複数行に折り返す */
}

.active-ingredient dl dd {
    /* 心と身体のお悩みに耳を傾け… */
    /* font-size: 17px; */
    /* line-height: 1.7; */
    margin: 0 15px;
    text-align: center;
}

.active-ingredient li p {
    /* 有効成分についての説明分 */
    /* font-size: 17px; */
    /* line-height: 1.7; */
    padding: 5px 0px 0px;
    /* padding: 値が３つの場合 上・左右・下 */
}

.sleep-quality-improvement-care-oil main .active-ingredient h2,
.eczema-and-rough-skin-care-gel main .active-ingredient h2,
.age-defying-care-cream main .active-ingredient h2,
.herpes-zoster-oil main .active-ingredient h2,
.cellulite-oil main .active-ingredient h2,
.atopic-eczema-oil main .active-ingredient h2 {
    /* ご使用方法・使用上の注意・全成分・おすすめのケア方法 */
    font-family: Helvetica, "Hiragino Sans", Arial, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin: 15px 0 0 0;
}

.active-ingredient li {
    max-width: 48%;
    /* max-width 48%で１カラムになる */
    /* 47%以下では480px以下で１カラムにならない */
    margin: 0 auto;
    /* 画像と画像の間のmarginをautoに設定 */
}

.active-ingredient dl img {
    max-width: 100%;
    /* 100%=1500px */
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
    transition-duration: 1s;
    /* 1sでゆっくりと戻る */
}

@media (max-width: 520px) {
    .active-ingredient li p {
        /* 有効成分についての説明分 */
        /* font-size: 17px; */
        padding: 0px;
    }
}


/* _______________________________________________________________________________ */
/* eczema-and-rough-skin-care-gel */
/* Eczema and Rough Skin Care Gel 湿疹・肌荒れ ケアジェル */

.yuko-miyata img {
    max-width: 100%;
    height: auto;
}

main .usage-result img {
    max-width: 48%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
}

main .usage-result ul {
    display: flex;
    /* 親要素に適用すると子要素（li）が並列になる */
    flex-wrap: wrap;
    /* フレックスアイテムを単一行から複数行に折り返す */
}

main .usage-result h3 {
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px 0;
}

main .usage-result li {
    max-width: 48%;
    /* max-width 48%で１カラムになる */
    /* 47%以下では520px以下で１カラムにならない */
    margin: 0 auto;
    /* 画像と画像の間のmarginをautoに設定 */
}

main .usage-result dl img {
    max-width: 100%;
    height: auto;
    border-radius: 17px;
    /* 画像の角丸を17pxに調整 */
    transition-duration: 1s;
    /* 1sでゆっくりと戻る */
}

main .usage-result dl dd {
    /* 心と身体のお悩みに耳を傾け… */
    /* font-size: 17px; */
    /* line-height: 1.7; */
    margin: 0 15px;
}

main .usage-result ul li span {
    color: #008000;
}
 
main .results-and-usage-data h3 {
    font-family: "游明朝", serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px 0;
}

main .results-and-usage-data img {
    max-width: 100%;
    height: auto;
}

/* _______________________________________________________________________________ */


/* _______________________________________________________________________________ */


/* _______________________________________________________________________________ */


/* _______________________________________________________________________________ */


/* _______________________________________________________________________________ */


/* _______________________________________________________________________________ */