@charset "utf-8"; 
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3 ,h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
    color: #000;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #303030;
    margin: 30px 0;
}

input, select {
    vertical-align:middle;
} 

/* original */
html, body{
    margin: 0;
    padding: 0;
  }
*{
  box-sizing: border-box;
}
  .sec01{
    height: 100vh;
  }

  .slide>span{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: #fff;
    color: #3498db;
    font-size: 36px;
    font-weight: bold;
  }
  .slider{
    display: none; /* 最初は非表示に */
  }
  .slider.slick-initialized{
    display: block; /* slickが実行完了したら表示 */
  }
  
  /* arrow */
  .slick-arrow{
    z-index: 2;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border-top: 3px solid #3498db;
    border-right: 3px solid #3498db;
    opacity: .8;
  }
  .slick-arrow::before{
    content: '';
  }
  .slick-prev{
    left: 30px;
    transform: rotate(-135deg);
  }
  .slick-next{
    right: 30px;
    transform: rotate(45deg);
  }
  /* dots */
  .slick-dots{
    bottom: -25px;
  }
  .slick-dots li,
  .slick-dots li button,
  .slick-dots li button::before{
    width: 12px;
    height: 12px;
  }
  .slick-dots li{
    margin: 0 7px;
  }
  .slick-dots li button{
    background-color: #fff;
    opacity: .8;
    border-radius: 100%;
  }
  .slick-dots li.slick-active button{
    opacity: .4;
  }
  .slick-dots li button::before{
    content: '';
  }

/* ここから追記 */
.top {
  background-image:url(../img/bgimg1.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.firstview {
  height: 100vh;
  background-image: url(../img/bgimg2.png),url(../img/landscape_pc.png); 
  background-position: top, bottom;
  background-size: 100%,100%;
  background-repeat: no-repeat,no-repeat;
  display: flex;
  justify-content: center;
  flex-direction: column;
  bottom: 0;
}

.logo {
  width: 100%;
  margin-top: -5%;
}
.logo_sp {
  display: none;
}

#nav {
  margin: 0;
  position: fixed;
  bottom: 0;
  display: grid;
  grid-template-columns: 33% 34% 33%;
  width: 100%;
  height: 11.5vh;
  z-index: 150;
  list-style: none;
}
#nav li {
  text-align: center;
  padding: 1em;
}
#nav li a {
  display: block;
  width: 100%;
  height: 100%;
}
.nav_flex {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#nav li a p {
  font-family: "ads-ayumin", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
  text-decoration: none;
  color: #FFF;
}
#nav li:nth-of-type(1){
  outline : 2px solid #604f26;
  outline-offset : -8px;
  background-color: #725c1c;
}
#nav li:nth-of-type(1):hover {
  filter: brightness(0.85);
}
#nav li:nth-of-type(2){
  outline : 2px solid #8b2121;
  outline-offset : -8px;
  background-color: #b3292c;
}
#nav li:nth-of-type(2):hover {
  filter: brightness(0.85);
}
#nav li:nth-of-type(3){
  outline : 2px solid #604f26;
  outline-offset : -8px;
  background-color: #725c1c;
}
#nav li:nth-of-type(3):hover {
  filter: brightness(0.85);
}
#nav li:nth-of-type(4){
  outline : 2px solid #8b2121;
  outline-offset : -8px;
  background-color: #b3292c;
}
#nav li:nth-of-type(4):hover {
  filter: brightness(0.85);
}
.br {
  display: none;
}
.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4em;
}
.gaiyou {
  display: flex;
  justify-content: center;
}
.gaiyou img {
  width: 100%;
}

.sec02 {
  background-image: url(../img/fukei.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4em 0;
}
.fukei_txt {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 15px;
}
.fukei_txt img {
  width: 100%;
}
/* グリッドスタイル */
.fukei_gallery {
    display: flex; /* フレックスボックスを使用して画像を横並びに */
    justify-content: space-around; /* 画像間のスペースを均等に */
    gap: 20px; /* 画像間の余白 */
}

/* サムネイル画像のスタイル */
.thumbnail {
    width: 100%; /* 幅を100%に設定 */
    cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
    transition: transform 0.3s; /* ホバー時の変化を滑らかに */
}

.thumbnail:hover {
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* モーダルのスタイル */
.modal {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* スクロールしても位置が固定 */
    z-index: 1; /* 他の要素の上に表示 */
    left: 0;
    top: 0;
    width: 100%; /* 幅は全体 */
    height: 100%; /* 高さも全体 */
    overflow: auto; /* コンテンツが多い場合はスクロール */
    background-color: rgba(0, 0, 0, 0.7); /* 背景の透明度 */
    animation: fadeIn 0.3s;
    z-index: 200;
}
.modal img {
  width: 100%;
}
.modal-content {
    margin: 5% auto; /* 上下に5%のマージン、左右中央 */
    width: 90%;
    max-width: 1000px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    animation: slideIn 0.5s;
}

.modal-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.close-button {
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 30px;
    cursor: pointer;
    z-index: 2;
}

.close-button:hover,
.close-button:focus {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}

/* アニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.fukei_photo img {
  margin: 2em 1em;
}

.sec03 {
  background-image: url(../img/shohin_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.shohin {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.shohin_title {
  margin: -6em auto 2em auto;
  z-index: 100;
  width: 300px;
}
.shohin_title img {
  width: 100%;
}
.shohin_content {
  display: flex;
  justify-content: center;
}
.shohin_content img {
  width: 100%;
}

.shimekiri {
  background-color: #b3292c;
  display: flex;
  justify-content: center;
  padding: 1em;
}
.wrapper2 {
    max-width: 1000px;
    padding: 0 3%;
}
.shimekiri_img {
  padding: 0 3%;
  width: 100%;
}
.shimekiri_img img {
  width: 100%;
}
.oubo_title img {
  width: 100%;
}
.oubo_attention {
  background-color: #f8ddd6;
  border-radius: 15px;
  font-size: 1.5em;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1.6em;
  margin: 1.5em 0;
  padding: 1.5em;
  color: #d44824;
}

.oubo_method {
  width: 100%;
  display: grid;
  place-content: center;
  place-items: center;
  grid-template-columns: 33% 33% 33%;
  margin: 2em auto 1em auto;
}
.method1 {
  width: 100%;
  grid-row: 1/2;
  grid-column: 1/2;
}
.method1 img {
  width: 100%;
}
.method1_txt {
  grid-row: 2/3;
  grid-column: 1/2;
}
.method2 {
  width: 100%;
  grid-row: 1/2;
  grid-column: 2/3;
}
.method2 img {
  width: 100%
}
.method2_txt {
  grid-row: 2/3;
  grid-column: 2/3;
}
.method3 {
  grid-row: 1/2;
  grid-column: 3/4;
}
.method3 img {
  width: 100%
}
.method3_txt {
  grid-row: 2/3;
  grid-column: 3/4;
}
.method_txt {
  padding: 0 1em;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.35em;
  line-height: 1.5em;
}
.method2_red {
  color: #b3292c;
  font-weight: 700;
  font-size: 0.8em;
  line-height: 1.4em;
}
.shoplist {
  display: flex;
  justify-content: center;
}
.shoplist img {
  width: 100%;
}

footer {
  margin-top: -7px;
  width: 100%;
  background-color: #000;
  padding-bottom: 5em;
}

footer .wrapper {
  padding: 2em;
}

.footer_all {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ft_maru {
  margin: 1em auto 0.5em auto;
  padding: 5px 1.8em;
  background-color: #fff;
  border-radius: 9999px;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1.3em;
  text-align: center;
}

.contact_phone {
  margin: auto;
}

.footer_txt {
  margin: auto;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5em;
  color: #fff;
  line-height: 1.1em;
  text-align: center;
}
.br2 {
  display: none;
}

.footer_txt2 {
  margin: auto;
  margin-bottom: 1em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1em;
  color: #fff;
}

.hplink {
  margin: auto;
  margin-bottom: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1em;
  color: #fff;
  text-decoration: underline;
}

@media screen and (max-width: 1408px) {
#nav li a p {
  font-size: 2em;
}
}
@media screen and (max-width: 1154px) {
#nav li a p {
  font-size: 1.8em;
}
}
@media screen and (max-width: 1054px) {
#nav li a p {
  font-size: 1.6em;
}
}
@media screen and (max-width: 950px) {  
.fukei_txt {
  padding: 0 3% 15px 3%;
}
.br {
  display: block;
}
}
@media screen and (max-width: 744px) {
#nav li a p {
  font-size: 1.4em;
}
#nav li {
  text-align: center;
  padding: 0.5em;
}
.shohin_title {
  width: 250px;
}
}
@media screen and (max-width: 645px) {
.logo {
  display: none;
}
.logo_sp {
  display: block;
  width: 100%;
  padding-bottom: 20px;
}
.shohin_title {
  width: 220px;
}

.oubo_method {
    align-items: start;
}

.method_txt {
    padding: 15px 0.5em;
    font-size: 1em;
    line-height: 1.5em;
}
}
@media screen and (max-width: 604px) {
#nav li a p {
  font-size: 1.2em;
}
}
@media screen and (max-width: 526px) {
#nav li a p {
  font-size: 1em;
  letter-spacing: -1px;
}
.wrapper {
    margin: 0 auto;
    padding: 2em;
}
.shohin_title {
  width: 200px;
  margin: -4em auto 2em auto;
}
.oubo_attention {
    font-size: 1.2em;
}
footer {
    padding-bottom: 13.5vh;
}
.footer_txt {
    font-size: 1.2em;
    line-height: 1.1em;
    padding-bottom: 8px;
}
}
@media screen and (max-width: 424px) {
.firstview {
    background-position: top right, bottom center;
    background-size: 120%, 150%;
}
#nav li a p {
  font-size: 0.9em;
}
.br2 {
  display: block;
}
.shohin_title {
  width: 150px;
  margin: -3em auto 2em auto;
}
.wrapper {
    margin: 0 auto;
    padding: 1em;
}
.sec02 {
    padding: 2.5em 0;
}

.fukei_gallery {
    gap: 8px;
}
.wrapper2 {
    max-width: 1000px;
    padding: 0;
}
}
@media screen and (max-width: 386px) {
#nav li a p {
  font-size: 0.8em;
}
.shohin_title {
  width: 130px;
}
}
@media screen and (max-width: 386px) {
#nav li a p {
  font-size: 0.7em;
}
#nav li:nth-of-type(1){
  outline-offset : -6px;
}
#nav li:nth-of-type(2){
  outline-offset : -6px;
}
#nav li:nth-of-type(3){
  outline-offset : -6px;
}
#nav li:nth-of-type(4){
  outline-offset : -6px;
}

}