@charset "UTF-8";
/* デフォルトで入っているボーダーを消す */
.navbar-toggler {
    border: none;
}
/* デフォルトで入っているフォーカスされたときにシャドウが入るのを消す */
.navbar-toggler:focus {
    box-shadow: none;
}

/*ページ内全体の文字の設定と背景の設定*/
 body {
    font-family: "Noto Serif JP", serif;
    font-size: 1em;
    color: #333333;   /*文字の色*/
    line-height:1.8em;
    background-color:#ffffff; /*一番後ろの背景色見えない部分*/
    }
.navbar-brand{
    padding-top: 1em;
}

.zen-old-mincho-regular {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
}
.aboreto-regular {
    font-family: "Aboreto", system-ui;
    font-weight: 400;
    font-style: normal;
}  

header{
    background-color: #6C8262;
    position: sticky;
    top: 0;
}
/* 新しく作ったburgerクラス */
.burger {
	position: relative;/* 子要素のspanをこの中で絶対配置にしたいので、親要素のburgerにrelativeを入れる */
	width: 28.34px;/* 幅の実態をもたせる */
	height: 21.3px;/* 高さの実態をもたせる */
	margin-right: 0.5em;/* 右のマージン調整 */
}
/* burgerクラスの3本線共通のスタイル */
.burger span {
	position: absolute;/* 絶対配置 */
	height: 2px;/* 高さの実態をもたせる */
	width: 40px;/* 幅の実態をもたせる */
	background: #fff;
	transition: .25s ease-in-out;/* トランジションは変化があった時にアニメーションさせる */
	transform: rotate(0deg);/* 変化後のcssのためにデフォルト0度を入れる */
}
/* 最初の一本め */
.burger span:nth-child(1) {
	top: 0;
}
/* 二本め */
.burger span:nth-child(2) {
	top: 13px;
}
/* 三本め */
.burger span:nth-child(3) {
	top: 26px;
}
/* bootstrapのnavbar-togglerクラスにはaria-expanded属性があるのでその状態を利用するfalseの時がメニュー閉じ、trueのときはメニューが開いた状態 */
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(1) {
	opacity: 0;/* 一本めはいらないので透明にして消す */
}
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(2) {
    transform: rotate(45deg);/* 2本めは真ん中なのでそのまま45回転 */
}
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(3) {
	top: 15px;/* 二本めと同じ高さにする */
	transform: rotate(-45deg);/* -45回転 */
}


#top{
    background-color: #6C8262;
    height: 660px;
    margin-bottom: 0%;

}
.maine{
     width: 390px;
     height: 528.57px;
     overflow: hidden;
 }
.maine img{
     width: 100%;
     height: auto;
     object-fit: cover;
}

#catchcopy{
    font-family: "Zen Old Mincho", Bold;
    font-size: 22px;
    color: #ffffff;   /*文字の色*/
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    margin-top: 1em;
}

#concept {
    margin-top: 0%;
    background: linear-gradient(rgba(174,186,168,30),rgba(255,255,255,100)150px);
    background-color: #ffffff;
    height: 600px;
}

.leaf1{
    padding-top: 30px;
    text-align: right;

    
}
.concept-text{
    font-family: "Aboreto", system-ui;
    font-size: 34px;
    color: #333333;   /*文字の色*/
    margin-top: -3em;
}
.concept-text p{
    border-bottom: 1px solid #333333;
    width: fit-content;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 7px;
    margin-left: auto;
    margin-right: auto;
}
.leaf2{
    margin-top: 480px;
}
.story1{
    font-family: "Zen Old Mincho", serif;
    font-size: 19px;
    color: #333333;   /*文字の色*/
    text-align: center;
    line-height: 74px;
    margin-top: -30em;
}

#concept-2{
    margin-top: 0%;
    background: linear-gradient(#ffffff,#FFE8CC,#EBC498);
    height: 1000px;
}
.grapefruit{
    width: 103.4px;
    height: 110.37px;
    overflow: hidden;
    margin-top: 300px;
    padding-left: 15px;
}
.grapefruit img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.grapefruit2{
    width: 103.4px;
    height: 110.37px;
    overflow: hidden;
    margin-top: 380px;
    margin-right: 2px;
    margin-left: auto;
}
.grapefruit2 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.grapefruit3{
    width: 170.05px;
    height: 174.14px;
    overflow: hidden;
    margin-top: 7px;
    margin-right: 15px;
    margin-left: auto;
}
.grapefruit3 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}

.story2{
    font-family: "Zen Old Mincho", serif;
    font-size: 19px;
    color: #333333;   /*文字の色*/
    line-height: 65px;
    letter-spacing: -1px;
    text-align: left;
    padding-left: 40px;
    margin-top: -37em;
}
.story2 p{
    text-decoration: underline rgba(235,167,80,30);
    text-decoration-thickness: 1px;
    text-underline-offset: 9px;
    border-radius: 100%;
}

#fragrance-grape{
    background-color: #EBC498;
    margin-top: 0px;
    height: 1300px;
}
.fragrance-text{
    font-family: "Aboreto", system-ui;
    font-size: 34px;
    color: #333333;   /*文字の色*/
    text-align: center;
}
.fragrance-haikei{
    background-color: #FFE8CC;
    border-top-left-radius: 180px 180px;
    border-top-right-radius: 180px 180px;
    margin-top: 45px;
    margin-left: 15px;
    margin-right: 15px;
    height: 1030px;
    box-shadow: 3px 3px 10px 0 #696868;
}

.haikei-g1{
    width: 88.45px;
    height: 94.14px;
    overflow: hidden;
    margin-left: 149px;
    margin-top: -62em;
}
.haikei-g1 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.haikei-g2{
    width: 152.21px;
    height: 155.87px;
    overflow: hidden;
    margin-right: 3px;
    margin-left: auto;
    margin-top: -4em;
}
.haikei-g2 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.haikei-g3{
    width: 137.84px;
    height: 141.15px;
    overflow: hidden;
    margin-right: auto;
    margin-left: 3px;
    margin-top: -7em;
}
.haikei-g3 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.haikeicollar-g1{
    width: 168.54px;
    height: 168.13px;
    overflow: hidden;
    margin-right: 17px;
    margin-left: auto;
    margin-top: -6.5em;
}
.haikeicollar-g1 img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.haikei-g4{
    width: 88.45px;
    height: 94.14px;
    overflow: hidden;
    margin-right: auto;
    margin-left: 81px;
    margin-top: -6em;
}
.haikei-g4 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.haikeicollar-g2{
    width: 168.54px;
    height: 168.13px;
    overflow: hidden;
    margin-right: auto;
    margin-left: 2px;
    margin-top: -0.9em;
}
.haikeicollar-g2 img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.haikei-g5{
    width: 128.63px;
    height: 131.73px;
    overflow: hidden;
    margin-right: 1px;
    margin-left: auto;
    margin-top: -10em;
}
.haikei-g5 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.haikeicollar-g3{
    width: 168.54px;
    height: 168.13px;
    overflow: hidden;
    margin-right: 2px;
    margin-left: auto;
    margin-top: -2em;
}
.haikeicollar-g3 img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.haikei-g6{
    width: 170.05px;
    height: 174.14px;
    overflow: hidden;
    margin-right: auto;
    margin-left: 1px;
    margin-top: -9.5em;
}
.haikei-g6 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}
.haikei-g7{
    width: 88.45px;
    height: 94.14px;
    overflow: hidden;
    margin-right: 106px;
    margin-left: auto;
    margin-top: -5em;
}
.haikei-g7 img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.5;
}

.handsoap_grape{
    width: 205.15px;
    height: 405.92px;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    margin-top: -31em;
}     
.handsoap_grape img{
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
}

.kaori_grape{
    margin-top: 125px;
}
.kaori_grape img{
    margin-left: 40px;
    margin-right: auto;

    border:solid 1px #333333;
    border-left: none;
    border-right: none;
}
.kaori_grape p{
    font-family: "Zen Old Mincho", Bold;
    font-size: 24px;
    color: #000000;   /*文字の色*/
    text-decoration: none;
    text-align: center;
    margin-top: -3.8em;
    margin-right: auto;
    margin-left: auto;
}
.kaori_grapmoji{
    font-family: "Zen Old Mincho", Bold;
    font-size: 17px;
    color: #000000;   /*文字の色*/
    text-decoration: none;
    margin-top: -1em;
    text-align: center;
    margin-right: auto;
    margin-left: -8em;
}
.kaori_grape_midashi{
    background-color: #FAB485;
    margin-top:4em;
    margin-left: 15px;
    margin-right: 15px;
    height: 41px;
}
.kaori_grape_midashi p{
    font-family: "Zen Old Mincho", Bold;
    font-size: 18px;
    color: #000000;   /*文字の色*/
    text-decoration: none;
    text-align: center;
    line-height: 2em;
}
.haikei_entyou{
    background-color: #FFE8CC;
    margin-top: 10em;
    margin-left: 15px;
    margin-right: 15px;
    height: 120px;
    box-shadow: 3px 10px 10px 0 #7a7978;
}
.sawayaka_moji{
    font-family: "Zen Old Mincho", Bold;
    font-size: 16px;
    color: #000000;   /*文字の色*/
    text-decoration: none;
    margin-left: 2em;
    margin-top: -16em;
}
.grape_kikaku{
    background-color: #F2D4BC;
    margin-top:0em;
    margin-left: 4.3em;
    width: 270px;
    height: 185px;
}
.grape_kikaku_img{
    width: 269.29px;
    height: 180.45px;
    overflow: hidden;
    margin-left: 3.5em;
    margin-top: -12em;
}     
.grape_kikaku_img img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.kyoukai{
    background: linear-gradient(#EBC498,#F2DACD,#C7C2D6);
    margin-top: 4em;
    height: 155px;
}

#fragrance-lavender{
    background-color: #C7C2D6;
    margin-top: 5em;
    height: 1030px;
}
.fragrance-haikei-lavender{
    background-color: #EDE8F8;
    border-top-left-radius: 180px 180px;
    border-top-right-radius: 180px 180px;
    margin-top: 60px;
    margin-left: 15px;
    margin-right: 15px;
    height: 1000px;
    box-shadow: 3px 3px 10px 0 #696868;
}
.haikei-l1{
    overflow: hidden;
    margin-right: auto;
    margin-left: 9em;
    margin-top: -59em;
}
.haikei-l1 img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.haikei-l2{
    margin-right: auto;
    margin-left: 0em;
    margin-top: -18em;
}
.handsoap_lavender{
    width: 205.15px;
    height: 405.92px;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    margin-top: -29.5em;
}
.handsoap_lavender img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.kaori_lavender{
    margin-top: 20px;
}
.kaori_lavender img{
    margin-left: 40px;
    margin-right: auto;

    border:solid 1px #333333;
    border-left: none;
    border-right: none;
}
.kaori_lavender p{
    font-family: "Zen Old Mincho", Bold;
    font-size: 24px;
    color: #000000;   
    text-decoration: none;
    text-align: center;
    margin-top: -3.8em;
    margin-right: auto;
    margin-left: auto;
}
.kaori_lavendermoji{
    font-family: "Zen Old Mincho", Bold;
    font-size: 17px;
    color: #000000;   
    text-decoration: none;
    margin-top: -1em;
    text-align: center;
    margin-right: auto;
    margin-left: -5em;
}
.kaori_lavender_midashi{
    background-color: #D9C2FF;
    margin-top:4em;
    margin-left: 15px;
    margin-right: 15px;
    height: 41px;
}
.kaori_lavender_midashi p{
    font-family: "Zen Old Mincho", Bold;
    font-size: 18px;
    color: #000000;   
    text-decoration: none;
    text-align: center;
    line-height: 2em;
}
.futto_moji{
    font-family: "Zen Old Mincho", Bold;
    font-size: 16px;
    color: #000000;   /*文字の色*/
    text-decoration: none;
    margin-left: 2em;
    margin-top: 1em;
}
.lavender_kikaku{
    background-color: #C8C6E2;
    margin-top:0em;
    margin-left: 4.3em;
    width: 270px;
    height: 185px;
}
.lavender_kikaku_img{
    width: 271.68px;
    height: 179.6px;
    overflow: hidden;
    margin-left: 3.4em;
    margin-top: -12em;
}     
.lavender_kikaku_img img{
    width: 100%;
    height: auto;
    object-fit: cover;
}