@charset "UTF-8";

/*COLORS
================================================ */
:root {
    --toiawasebeige: #E9DACD;
    --titlebrown: #5C4A41;
    --happypink: #eee7e5;
    --orange: #f3f1e7;
    --grey: #333;
    --white: #f8f7f6;
    --yellow: #ff6347;
    --brown: #583E2F;
    /*--brown: #664f43;*/
    /*--btnbrown: #A89286;motonoiro*/
    --btnbrown: #856859;/*ginsusutake*/
    --warmgrey: #DDDCD8;
    --orangegrey: #EFE7E2;
    --ginsusutake:#856859;
    --borderyellow:#AB986B;
    --beigewarm:#E9DACD;
    --candlebeige: #FFFAF2;
}
/*ぷれみあむほわいと089
background-image:
 linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);


/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    background-color: var(--white);
    font-family: "Hiragino Mincho Pro",
    "Yu Mincho", "游明朝体", 
   "ヒラギノ明朝 Pro",
    "YuMincho", serif;

    /*font-family: "Yu Gothic", 
    "游ゴシック体", "YuGothic", 
    "Hiragino Kaku Gothic Pro",
     "Meiryo", sans-serif;*/
    font-weight: 500;
    margin: 0;
  }
/*
COMMON
================================================ */
a {
    display: block;
}
p {
    line-height: 2rem;
    font-size: 15px;
}
img {
    max-width: 100%;
}
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--box-white);
    border-radius: 0 0 10px 10px;
}
.wrapper-homemain {
    max-width: 1080px;
}
.candle-bgcolor {
    /*background-color: var(--happypink);*/
    background-color: var(--white);
}
/*
BUTTON
===============================================*/
.btn-more {
    display: block;
    margin: 40px auto 0;
    padding: 12px 8px;
    width: 236px;
    color: #fff;
    font-size: 18px;
    font-family: "Hiragino Mincho Pro", "Yu Mincho", "游明朝体", "ヒラギノ明朝 Pro", "YuMincho", serif;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    background-color: var(--btnbrown);
    border: 1px solid var(--borderyellow);
    cursor: pointer;
    transition: all 0.3s;
}

/*.btn-more {
    display: flex;
    justify-content:space-between;
    align-items: center;
    position: relative;/*〇背景の位置基準
    padding: 10px 52px 8px 63px;/*上右下左
    width: 224px;
    background-color: var(--btnbrown);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    /*margin: 0 auto;
    margin: 32px auto;
}
.btn-more::after {/*矢印部分
    content: '';
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}*/

.btn-wide {
    display: block;
    margin: 0 auto;
    padding: 24px 8px;
    width: 284px;
    color: #fff;
    font-size: 18px;
    font-family: "Hiragino Mincho Pro",
     "Yu Mincho", "游明朝体", "ヒラギノ明朝 Pro", "YuMincho", serif;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    background-color: var(--btnbrown);
    border: 1px solid var(--borderyellow);
    cursor: pointer;
    transition: all 0.3s;
  }

  .btn-wide:hover {
    background-color: var(--grey);
    color: white;
}
.contact .btn-wide {
    margin-top: 60px;
}

/*インターネットでの問い合わせ枠*/
.toiawase {
    background-color: var(--toiawasebeige);
    text-align: center;
    border: 1px solid var(--brown);
    padding: 30px;
    max-width: 780px;
}
.toiawase-title {
    font-size: 18px;
    color: var(--brown);

}
/*問い合わせページ下の注釈文*/
.btn-wide-note {
    width: calc(100vw - 8.533vw * 2); /* 左右の余白を16px相当のvwで指定 */
    max-width: 450px;
    margin: 0 auto;
    line-height: 18px;
    font-size: 14px;
}
/*.home-access p {
    color: #fff;
}*/

/*個別装飾*/
.btn-onlineshop {
    margin-top: 80px;
    padding: 20px 55px 20px 58px;
}
.btn-lesson {
    padding: 24px 66px 24px 68px;
}
.btn-news {
    padding: 24px 46px 24px 43px;
    margin-top: 24px;
}


.btn-contact {
    padding: 24px 52px 24px 50px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.btn-map {
    padding: 8px 38px 10px 54px;/*上右下左*/
    width: 200px;
}
 /*PAGE-CANDLE*/
 .candle-post .btn-wide {
    margin-top: 40px;}

    
/*CALENDER
========================================================*/
.calendar {
    padding: 40px 0;
    max-width: 780px;
    margin: 0 auto;
    margin-bottom: 40px;
    background-color: var(--beigewarm);
}
.calendar p {
    text-align: center;
    font-size: 18px;
    padding-bottom: 24px;
}
.calender-notes {
    padding: 8px;
    width: 400px;
    margin: 0 auto;
}

.calender-notes01 span {
    background-color: var(--yellow);
    color: var(--yellow);
    margin-bottom: 8px;
}
.calender-notes02 span {
    background-color: #E5C441;
    color: #E5C441;
}

/*
山のイラスト＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
*/
.img-mountain {
    width: 265px;
    display: block;
    margin: 64px auto 0;
}

/*
BREADCRUMBLIST
==============================================*/
/* パンくずリスト全体のスタイル */
.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* フレックスレイアウトにする */
    align-items: center; /* 垂直方向に中央揃え */
    font-size: 14px;
}

/* パンくずリストの各項目のスタイル */
.breadcrumb li {
    margin-right: 8px;
    display: flex; /* フレックスレイアウトにする */
    align-items: center; /* 垂直方向に中央揃え */
}

/* 「＞」を挿入する */
.breadcrumb li::before {
    content: "＞"; /* 「＞」を挿入 */
    margin-right: 8px; /* アイコンとリンクの間にスペースを追加 */
    color: #6c757d; /* 矢印の色 */
}

/* 最初の項目には「＞」を表示しない */
.breadcrumb li:first-child::before {
    content: ""; /* 最初の項目には表示しない */
}

/* パンくずリストのリンクスタイル */
.breadcrumb li a {
    text-decoration: none;
    color: #007bff;
    cursor: pointer;
}

/* カーソルを合わせたときの色を変える */
.breadcrumb li a:hover {
    color: #ff6347;
}

/* 最後の項目はリンクではなく通常のテキスト */
.breadcrumb li:last-child {
    color: #6c757d;
    cursor: default;
}
/*
ASIDE(記事一覧ページのみ)
==============================================*/

.side-box {
    background-color: var(--white);
    width: 96vw;
    max-width: 1000px;
    margin: 24px auto;
    margin-bottom: 4rem;
    border: 1px solid #ccc;
    outline: 2px solid #ccc;
    outline-offset: 4px;
    border-radius: 6px;
    padding: .875rem;
    position: relative;
}
.side-box h3 {
    font-size: 24px;
    font-family: "Hiragino Mincho Pro", "Yu Mincho", 
    "游明朝体", "ヒラギノ明朝 Pro", "YuMincho", serif;
    font-weight: 600;
    margin-bottom: 24px;
}
.side-box li {
    border-bottom: 1px dashed #ccc;
    padding: 1rem .25rem;
    display: flex;
}
.side-box li::before {
    display: inline-block;
    content: '';
    background: #93d8d0;
    width: 8px;
    height: 8px;
    margin: 6px 10px 0 0;
    border-radius: 50%;
}


/*ANIMASION
=============================*/
/*フワッと持ち上がる*/
.fade-in-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

.fade-in-up.show {
    opacity: 1;
    transform: translateY(0);
}
/*class名itemの画像が浮かび上がったあとテキストが下からフワッと*/
.item img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 3s ease-out, transform 3s ease-out;
}
.item img.show {
    opacity: 1;
    transform: translateY(0);
}
.item p {
    transform: translateY(30px);
    transition: transform 2s ease-out 0.5s; /* 0.5秒遅延 */
}
.item p.move-up {
    transform: translateY(0);
}


/*
TOP画像の重なりとフェードイン・フェードアウトのスタイルを設定*/
.home-img {
    position: relative;
    height: 84vh;
    overflow: hidden;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;/*背景画面を背景に*/
    pointer-events: none;/*クリック操作を無効化*/
}

.fade-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-img.active {
    opacity: 1;
}
.homeimg-title {
    position: relative; /* 位置を指定可能に */
    z-index: 10; /* 画像よりも前面に表示 */
    text-align: right;
    color: #fff;
    padding: 74vh 1rem 3rem;
}

/*
HEADER
================================================ */
header {
    background: rgba(51,51,51,1);
    /*padding: 1rem 0;*/
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
}

nav{
    /*position: relative;*/
    z-index: 15;/*ナブリストも前面に*/
}

header .wrapper {
    display: flex;
    justify-content: space-between;
}
header a {
    font-family: "Yu Gothic", 
    "游ゴシック体", "YuGothic", 
    "Hiragino Kaku Gothic Pro",
     "Meiryo", sans-serif;
    color: var(--white);
    font-size: 15px;
}
header a:hover {
    color: var(--btnbrown);
}
.header-icon {
    width: 55px;
    height: 50px;
    padding: 4px;
}
h1 a {
    color: var(--grey);/*コトブキロケッツという文字を視認できないように*/
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    text-align: center;
    margin: 0px;/*もとは10ｐｘ*/
    font-size: 8px;/*もとは１４ｐｘ*/
}

.box-yellow {
    display: block;/*aタグインライン要素なのでボックスに*/
    margin: 9px 76px 18px 0;
    /*margin-top: 9px;*/
    /*padding-top: 10px;*/
    /*margin-right: 76px;*/
    font-size: 15px;
    /*border: 1px solid rgba(255,255,255,.5);*/
    color: var(--yellow);
    padding: 10px 10px 4px;
    }

.btn-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.5);
    color: var(--white);
    padding: .5rem .5rem;
}
.blue {
    background: rgba(51,51,51,0.9)
    ;
    width: 0;
    position: absolute;
    z-index: 2;
    top: 50px;
    right: 0;
    overflow: hidden;
    transition: 0.5s;
}
.blue.open-menu {
    width: 100%;
}

.blue li {
    text-align: center;
    margin: 1rem 0;
}
.blue a {
    display: block;
}
.blue-item a {
    text-decoration: none; /* デフォルトで下線を消す */
}

/*.blue-item .current {
    text-decoration: underline; /* 現在のページに下線 
    color: var(--btnbrown); /* 色の強調 
}*/
header li:hover {/*ホバー*/
    color: #c7c3ba;
}

/*HOME-IMG
============================================== */
.home-img {
position: relative;
height: 84vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;/*画像の表示位置を動かす*/
background-image: url(img/bg-hero1.jpg);
transition: background-image 1s ease-in-out;/*フェードアニメーションのスムーズな切換えを実現*/
}

.homeimg-title {
    text-align: right;
    color: #fff;
    padding: 74vh 1rem 3rem;/*上　左右　下*/
}


/*
HERO
================================================ */
.home-hero {
    padding: 60px .5rem 68px;
    margin: 0 auto;
}
.wrapper-icon {
    text-align: center;
}
.home-hero img {
    width: 100px;
    height: 100px;
    margin: 8px;
}
.hero {
font-weight: 600;
text-align: center;
margin-bottom: 16px;
line-height: 34px;
}
/*CANDLE*/
.candle-hero {
    background: url(img/candle-hero.jpg) no-repeat center /96vw;
    padding-top: 33vh;
}
.candle-hero h2 {
    font-family: "Hiragino Mincho Pro", "Yu Mincho", 
    "游明朝体", "ヒラギノ明朝 Pro", "YuMincho", serif;;
}
.candle-bgcolor .candle-post {
    background-color: #DCD9D4;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);
    background-blend-mode: soft-light,screen;
    /*background-color: var(--warmgrey);*/
}
.contact-wrapper .candle-hero {
    background: url(img/onlineshop.jpg) no-repeat center /96vw;
}/*CONTACT topIMG*/
.notfound .candle-hero {
    background: url(img/lesson4.jpg) no-repeat center /96vw;
}
.notfound .candle-moreread {
    color: var(--warmgrey);
}

.candle-hero h2 {
    color: #fff;
    font-size: 1.5rem;
    margin: 8vw 0 12vw;
    background-color: rgba(44,35,26,0.6);
    padding: 1rem;
    display: inline-block;
}
.candle-heroread {
    margin: 3rem 1rem 0;
}
.candle-herotitle {
    font-family: "Hiragino Mincho Pro",
     "Yu Mincho", "游明朝体", "ヒラギノ明朝 Pro", "YuMincho", serif;
    font-size: 32px;
    font-weight: 600;
    margin: 80px 16px 40px;
}


/*HOME-STORY
============================================*/
/*要素タイトル*/
.home-story {
    width: 97vw;
    max-width: 1080px;
    margin: 0 auto;
    background-color: var(--candlebeige);
    /*background-image:
    linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    /*background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);*/
    /*background-color: var(--orange);*/
    padding: 38px 16px 48px;
    margin-bottom: 80px;
}
.box-title {
    position: relative;
    top: 18px;
}
.title {
    color: #333;
    text-align: left;
    font-size: 34px;
    font-family: "Hiragino Mincho Pro",
     "Yu Mincho", "游明朝体", 
    "ヒラギノ明朝 Pro",
     "YuMincho", serif;
    font-weight: 700;
    line-height: 43px;
    padding: 0 16px;
}
.title-deco {
    padding: 0 16px;
}

.lead {/*リード文*/
    padding-bottom: 24px;
}

/*item。FREXの中身のBOX要素*/
.item {
padding: 0 8px 56px;
max-width: 800px;
margin: 0 auto;
}
/*ストーリーの中のflexアイテム内の高さを揃える*/
.item-story {
display: flex;
flex-direction: column;/*縦並びにflex*/
}
.item-story p {
    flex-grow: 1;/*空きスペースの伸びる倍率を指定して花とみつろうのテキストを同幅に*/
}

.box-subtitle {
    display: flex;
}
.subtitle {
    font-family: "Hiragino Mincho Pro",
    "Yu Mincho", "游明朝体", 
   "ヒラギノ明朝 Pro",
    "YuMincho", serif;
    font-size: 30px;
    font-weight: 700;
    margin-left: 8px;
}
.candle-post .subtitle {
    font-size: 28px;
}
.title-deco {
    color: var(--titlebrown);
    font-family: "Homemade Apple", cursive;
    font-weight: 400;
    font-style: normal;
    margin-top: 10px;
    margin: 0;
}
.item img {
    height: auto;
    width: 86vw;
    margin: 16px 0 24px;
}
.item p {
    margin: 0 auto;
    padding:0 16px;
    max-width: 560px;
}

/*読み物ページへの案内*/
.read-more {
    display: block;
    width: 87vw;
    max-width: 400px;
    margin: 0 auto;
    height: 180px;
    border: 1px solid var(--brown);
}
.read-more p {
    text-align: center;
    line-height: 24px;
    padding: 24px 16px 16px;
}

.aboutcandles .home-story {
    margin-bottom: 0px;
}

/*PAGE-CANDLE*/
article {
    width: 95vw;
    /*max-width: 1080px;*/
    max-width: 1200px;
    margin: 0 auto 24px;
    background-color: var(--white);
    /*background-color: var(--warmgrey);*/
}
.candle-post {
    padding: 32px 16px 40px;
}
.candle-post img {
    width: 500px;/*360pxから変更。heightも*/
    height: 500px;
    object-fit: cover;
}
.candle-post .item {
    padding: 0 8px;
}
.candle-moreread {
    text-align: center;
}


/*ONLINESHOP
================================================*/
.onlineshop {
    background-color: var(--beigewarm);
 background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);
 background-blend-mode: soft-light,screen;
    /*background-color: var(--warmgrey);*/
    width: 96vw;
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 16px;
    margin-bottom: 80px;
}
.onlineshop img {
    width: 86vw;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 16px auto 0;
    
}
.onlineshop .box-title {
    width: 308px;
    margin: 0 auto;
    text-align: center;
}
.onlineshop .title {
    font-size: 30px;
}
.shop-img {

    padding: 8px 8px 8px;
}
.shop-img p {
    margin-top: 16px;
}
/*
1DAYLESSON
================================================ */
.lessons .home-story {
    background-color: var(--orangegrey);
}
.lessonimg1 {
    width: 230px;
    height: auto;
}
.lessons img {
    margin: 5px auto;
}
.lessons p {
    padding: 0 8px 48px;
    width: 90vw;
    max-width: 400px;
    margin: 0 auto;
}
.yoyaku-title {
    font-size: 16px;
    color: var(--titlebrown);
    width: 63%;
    text-align: center;
    margin: 40px auto 0;
}
/*HOME-NEWS
================================================*/
.home-news .home-story {
    background-color: var(--white);
}
.home-news .wrapper-flex {
    flex-wrap: wrap;
}
.wrapper-homenewsmb {
    display: flex;
}
.wrapper-homenewsmb img {
    width: 33vw;
    max-width: 186px;
    height: 33vw;
    max-height: 186px;
    background-size: cover;
    margin-bottom: 1px;
}
.p-homenewsmb {
    padding: 8px 0 8px 8px;
}
.home-newstitle {
    line-height: 24px;
    padding-top: 12px;
}

/*HOME-ACCESS
=======================================*/
/*.home-access {/*背景に写真*/
    /*padding: 64px 4px;
    /*background-image: url(img/lesson12.jpg);*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center center;*/
    /*height: 80vh;
}*/

.home-access .box-title {
    width: 308px;
    margin: 0 auto;
    text-align: center;
}
.home-access .title {
    margin-bottom: 64px;
    text-align: center;
    color: var(--titlebrown);
}

.home-access-table {
    /*color: #fff;*/
    margin: 0 auto;
    margin-top: 56px;
    margin-bottom: 40px;
}
.info-title {
 /*background-color: #c05c22;*/
 padding: 8px ;
 width: 100px;
}
.info-content {
    padding: 8px 0;
    line-height: 20px;
}

.info-content p {
    font-size: 13px;
    line-height: 16px;
    margin-top: 4px;
    margin-left: 12px;
}
.calendar-container iframe {
    display: block;
    margin: 0 auto;
}

/*.november {
    max-width: 400px;
    margin: 24px auto;
}
/*.home-access img {
    max-width: 400px;
}*/
/*.home-access iframe {
    border: 0;
    width: 80vw;
    height: 50vh;
    margin: 0 auto;
    frameborder: 0;
    scrolling: no;
}

/*.iframe-style {
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 60vh;
}*/


/*CANDLE-SINGLE
=================================================*/
.candle-single-bgcolor {
    background-color: #DCD9D4;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%);
    background-blend-mode: soft-light,screen;
    /*background-color: var(--warmgrey);*/
}
.candle-single-bgcolor .candle-hero {
    background: url(img/candle-hero.jpg) no-repeat center /96vw;
    height: 34vh;
    padding-top: 12vh;
}
.candle-single-bgcolor .candle-herotitle {
    font-size: 28px;
    text-align: center;
}
/*タブ切り替えろうそくページ*/
/* ボタンの基本スタイル */
.candle-button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.candle-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* アクティブなボタンのスタイル */
.candle-button.active {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}

/* 記事のスタイル */
.candle-articles .candle-article {
    display: none; /* JavaScriptで制御するための初期設定 */
}

.candle-articles .candle-article.active {
    display: block; /* 表示する記事 */
}
/*========================================================*/



/*
FOOTER
================================================ */

.footer-a {
    background: var(--brown);
    text-align: center;
    padding: 3rem;
}
.footer-a ul {
    margin-top: 66px;
    margin-bottom: 3rem;
}
.footer-a li {
    margin: 0 12px;
    color: #fff;
    padding-bottom: 8px;
}

.footer-a li:hover {
    color: #c7c3ba;
}
.wrapper-icon {
    width: 100px;
    height: 100px;
    margin: 32px auto;  
}
/*
.footer-a img {
    width: 100px;
    height: 100px;
    margin: 8px 8px 36px; 
}*/
.instagram {
    width: 40px;
    height: 40px;
}
.footer-a h3 {
    color: var(--white);
}
/*
PAGE-CANDPE-POST
*/
.candle-post p {
    margin-bottom: 32px;
}

/*お問い合わせページ(contact.html)
==================================================*/

.contact, .privacy {
  padding: 8px;
  margin: 80px auto 72px;
  max-width: 800px;

}
.contact .form-top {
  width: 100%;
  height: 215px;
  background-size: cover;/*画像の縦横比を保持して全画面表示*/
  background-position: center center;
}

.container {
  position: relative;
}

/*文字contactのスタイル*/
.lead-letter_form {
  position: absolute;
  text-align: center;
  /*color: #e1d1a3;*/
  padding-top: 40px;
  padding-bottom: 48px;
  /*padding-top: 24px;*/
  padding-bottom: 30px;
  font-size: 4.8rem;
  font-weight: 700;
  color: rgba(194, 163, 72, 1);
  
}
/*====▼section<form-top>PC版====*/
@media(min-width:900px) {
  .background {
    height: 460px;
  }
}

.prices-img {
  width: 332px;
  height: 420px;
  margin: 10px;
}
.prices-text {
 text-align: center;
 font-size: 2.0rem;
 padding-bottom: 20px;
}

.prices-text02 {
  font-size: 1.3rem;
}

/*===============▼section<contact>お問い合わせ========================*/
.contact-title {
    text-align: center;
    padding-top: 100px;
}
.contact-title h2 {
    text-align: center;
}
.contact-title a {
    font-size: 14px;
}

::placeholder {/**/
  color: var(--btnbrown);
}

.notes {
    text-align: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  /*font-weight: bold;*/
  /*font-size: 16px;*/
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}

.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  margin-left: 10px;
  padding-top: 8px;
  padding-bottom: 5px;
  width: 48px;
  display: inline-block;
  text-align: center;
  color: #f31b80;
  font-size: 13px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    padding-top: 4px;
    padding-bottom: 4px;
    width: 34px;
    font-size: 10px;
  }
}
.Form-Item-Input {
    border: 1px #F2F2F2;
    /*margin-left: 40px;*/
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 86vw;
    max-width: 600px;
    background: var(--orangegrey);
    font-size: 18px;
}

.Form-Item-Textarea {
  border: 1px  #ddd;
  /*margin-left: 40px;*/
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 86vw;
  max-width: 600px;
  background: var(--orangegrey);
  font-size: 18px;
}


/*チェックボックスのCSS*/

 
.ECM_CheckboxInput {
  /*padding: 12px 8px;*/
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ECM_CheckboxInput-Input {
  margin: 0;
  width: 0;
  opacity: 0;
}
.ECM_CheckboxInput:hover > .ECM_CheckboxInput-DummyInput {
  background: #DDDDDD !important;
  border: solid 2px #333333;
}
.ECM_CheckboxInput-Input:focus + .ECM_CheckboxInput-DummyInput {
  background: #DDDDDD !important;
  border: solid 2px #333333;
}
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput {
  border: solid 2px #333333;
  background: #FFFFFF;
}
.ECM_CheckboxInput-Input:checked + .ECM_CheckboxInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hlY2siPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==") no-repeat center;
  background-size: contain;
}
.ECM_CheckboxInput-DummyInput {
  position: relative;
  margin-left: 12px;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  border: solid 1px #888888;
  background: #FFFFFF;
}
.ECM_CheckboxInput-LabelText {
    width: 80vw;
    margin-left: 24px;
    margin-bottom: 16px;
    line-height: 20px;
    display: block;
    font-size: 16px;
    font-weight: 600;
}
small {
    font-size: 13px;
}
.contact p {
    margin-top: 24px;
    font-size: 15px;
}
/*
PRIVACY POLICY page
================================================*/
.guide {
    text-decoration: var(--grey) underline 1px;
    text-align: center;
    font-size: 14px;
}
.privacy {
    width: 86vw;
    max-width: 1080px;
    padding: 100px auto;
}
.privacy-head {
    margin: 80px auto;
}
.privacy section {
    margin-bottom: 80px;
}
.privacy h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}
/*
DESKTOP SIZE 
================================================ */
@media (min-width: 950px) {
    /* Layout*/
    .container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4rem;
        padding: 1rem 2.5rem 2.5rem;
    }

    /* Header */
    .main-nav {
        width: 100%;
        position: static;
        display: flex;
    }
    .main-nav li {
        margin: 0 0 0 1.5rem;
    }
    .container-right {
        display: flex;
        position: static;
    }
    .btn-menu {
        display: none;
    }
    .blue {
        width: 100%;
        display: flex;
        position: static;/*これ不可欠*/

            /*background-color: #93d8d0;
            list-style: none;
            font-size: 15px;
            font-weight: 600;
            padding-top: 1rem;
            padding-left: 0px;
            height: 48px;*/
    }
    .blue-item:first-child {
        margin-left: 0 0 0 1.5rem;
    }
    
    .blue-item {
        font-size: 15px;
        margin-right: 24px;
    }
    .blue-item a {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-right: 20px;
    }
    .blue-item span {
        font-size: 13px;
    }
    .blue li {
        margin: ;
    }   
}

    /*home-img*/
 @media (min-width: 760px) {
.wrapper-homeimg {
    max-width: 1200px;
    margin: 0 auto;
}
h2 {
    background-position: 0 40px;
}
.candle-hero h2 {
    font-size: 2.5rem;
}
.candle-heroread {
    margin: 3rem auto;
    max-width: 1080px;
}

    /* home-メインセクション全体の最大幅 */
.wrapper-homemain {
    max-width: 1080px;
    margin: 0 auto;
}
/*.home-story {
    width: 100%;
}もし最大幅をきっちり1080に揃えたいときはこれを動かす！！！
*/

.wrapper-flex {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.candle-post p {
    margin: 50px auto 60px;
}

/*onlineshop*/
.onlineshop .title {
    font-size: 34px;
    width: 350px;
}
.shop-img {
    padding: 56px 8px 24px;
}
.shop-img p {
    margin-top: 16px;
    padding-top: 56px;
}
   /*news*/
  
   .wrapper-homenewsmb {
    display: block;/*flexを無効にして通常のブロックレイアウトに*/
}
   /*access*/
   .home-access iframe {
    width: 40vw;
    /*height: 30vh;*/
}
 }

@media (min-width: 800px) {
.wrapper-homenewsmb img {
    width: 33vw;
    /*max-width: 187px;*/
    height: 33vw;
    /*max-height: 187px;*/
    background-size: cover;
    margin-bottom: 1px;
    margin-right: 1px;
}
.p-homenewsmb {
    max-width: 200px;
}
   }


}