@charset "UTF-8";

/*--root--*/
:root {
  --backColor: #f7f6f3;
  --fontColor: #241f1d;
  --mainColor: #241f1d;
  --linkColor: #7e663d;
  --font-size: 17px;
  --gothic : "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  --mincho : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  --logo_size_sp: 50px;
  --logo_size_pc: 92px;
  --wrap-size: 84%;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --p-line: .6rem;
  --h1-spacing: 1em;
  --header-nav-wrap:70%;
}

@media screen and (max-width:640px){
 /*--root--*/
  :root {
    --h1-spacing: .8em;
    --header-nav-wrap:100%;
  }
}


 @font-face {
    font-family: 'iconeFont';
    font-style: normal;
    font-weight: 400;
    src: url('../font/iconeFont.ttf') format('woff');
    font-display: swap;

  }

  .icone {
    font-family: 'iconeFont';
     -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-size: 120%;
  }

  .icone-arrows-rotate:before{content: "A";}
  .icone-bars:before{content: "B";}
  .icone-bookmark:before{content: "C";}
  .icone-camera-retro:before{content: "D";}
  .icone-cart-shopping:before{content: "E";}
  .icone-check:before{content: "F";}
  .icone-circle-user:before{content: "G";}
  .icone-clock:before{content: "H";}
  .icone-comment-sms:before{content: "I";}
  .icone-comment:before{content: "J";}
  .icone-copy:before{content: "K";}
  .icone-database:before{content: "L";}
  .icone-desktop:before{content: "N";}
  .icone-down-to-line:before{content: "M";}
  .icone-envelope:before{content: "O";}
  .icone-eye-slash:before{content: "P";}
  .icone-eye:before{content: "Q";}
  .icone-file:before{content: "R";}
  .icone-flag:before{content: "S";}
  .icone-folder-open:before{content: "T";}
  .icone-folder:before{content: "U";}
  .icone-get-pocket:before{content: "V";}
  .icone-heart-regular:before{content: "W";}
  .icone-heart:before{content: "X";}
  .icone-house:before{content: "Y";}
  .icone-image:before{content: "Z";}
  .icone-instagram:before{content: "a";}
  .icone-line:before{content: "b";}
  .icone-list-ul:before{content: "c";}
  .icone-magnifying-glass:before{content: "d";}
  .icone-mobile-notch:before{content: "e";}
  .icone-right-to-bracket:before{content: "f";}
  .icone-signal:before{content: "g";}
  .icone-check:before{content: "h";}
  .icone-facebook:before{content: "i";}
  .icone-pinterest:before{content: "j";}
  .icone-x-twitter:before{content: "k";}
  .icone-xmark:before{content: "l";}
  .icone-tablet-screen-button:before{content: "m";}
  .icone-tag:before{content: "n";}
  .icone-thumbs-up:before{content: "q";}
  .icone-thumbs-down:before{content: "p";}
  .icone-thumbs:before{content: "q";}
  .icone-thumbtack:before{content: "r";}
  .icone-trash:before{content: "s";}
  .icone-user:before{content: "t";}
  .icone-watch:before{content: "u";}
  .icone-wifi:before{content: "v";}
  
.preload *{
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

/* -- REST CSS -- */
* {
  color: var(--mainColor);
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  outline: none;
  list-style: none;
  font-kerning: auto;
  text-decoration:none;
}

html, body {
 /* height: 100%;*/
 background-color: #fcfcfc;
}


/* -- フォントサイズ -- */
/* -- 横幅 -- */

html {
  font-family: var(--gothic);
  line-height: 1.6;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: calc((100vw - 1200px) / 140 + var(--font-size));
}

@media screen and (max-width:640px){
 :root {
    --wrap-size: 100%;
   --bs-gutter-x: 3rem;
  }
  html {
    font-size: calc((100vw - 600px) / 140 + (var(--font-size)*1));
  }
}

@media screen and (min-width:1280px){
   :root {
    --wrap-size: 74%;
  }
  html {
    font-size: 1em;
  }
}

.font-size1,
.font-size2,
.font-size3,
.font-size4,
.font-size5,
.font-size6{
  font-weight: 300;
  line-height: 1.2;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.font-size1{font-size: calc(1.625rem + 4.5vw);}
.font-size2{font-size: calc(1.575rem + 3.9vw);}
.font-size3{font-size: calc(1.525rem + 3.3vw);}
.font-size4{font-size: calc(1.475rem + 2.7vw);}
.font-size5{font-size: calc(1.425rem + 2.1vw);}
.font-size6{font-size: calc(1.375rem + 1.5vw);}

h1, .h1{font-size: calc(1.375rem + 1.2vw);}
h2, .h2{font-size: calc(1.325rem + .9vw);}
h3, .h3{font-size: calc(1.3rem + .6vw);}
h4, .h4{font-size: calc(1.275rem + .3vw);}
h5, .h5{font-size: 1.25rem;}
h6, .h6{font-size: 1rem;}

@media screen and (min-width:1280px){
  .font-size1{font-size: 5rem;}
  .font-size2{font-size: 4.5rem;}
  .font-size3{font-size: 4rem;}
  .font-size4{font-size: 3.5rem;}
  .font-size5{font-size: 3rem;}
  .font-size6{font-size: 2.5rem;}

  h1, .h1{font-size: 2.5rem;}
  h2, .h2{font-size: 2rem;}
  h3, .h3{font-size: 1.75rem;}
  h4, .h4{font-size: 1.5rem;}
  h5, .h5{font-size: 1.25rem;}
  h6, .h6{font-size: 1rem;}
}

 .small, small {
  font-size: .875em;
}

.textAlign-center{text-align:center;}
.textAlign-left{text-align:left;}
.textAlign-right{text-align:right;}
.textAlign-justify{text-align:justify;}

p {
  margin-top: 0;
  margin-bottom: var(--p-line);
  letter-spacing:.26em;
  line-height:1.6em;
}

p a{
  color: var(--linkColor);
}

.font-size50 *{font-size:50%;}
.font-size60 *{font-size:60%;}
.font-size70 *{font-size:70%;}
.font-size80 *{font-size:80%;}
.font-size90 *{font-size:90%;}
.font-size110 *{font-size:110%;}
.font-size120 *{font-size:120%;}
.font-size130 *{font-size:130%;}
.font-size140 *{font-size:140%;}
.font-size150 *{font-size:150%;}

/* -- 間隔 -- */
.space_4 > * + *{margin-top: .4rem;}
.space_6 > * + *{margin-top: .6rem;}
.space_8 > * + *{margin-top: .8rem;}
.space1 > * + *{margin-top: 1rem;}
.space2 > * + *{margin-top: 2rem;}
.space3 > * + *{margin-top: 3rem;}
.space4 > * + *{margin-top: 4rem;}
.space5 > * + *{margin-top: 5rem;}

.margin-top1{margin-top: 1rem;}
.margin-top2{margin-top: 2rem;}
.margin-top3{margin-top: 3rem;}
.margin-top4{margin-top: 4rem;}
.margin-top5{margin-top: 5rem;}

.margin-bottom1{margin-bottom: 1rem;}
.margin-bottom2{margin-bottom: 2rem;}
.margin-bottom3{margin-bottom: 3rem;}
.margin-bottom4{margin-bottom: 4rem;}
.margin-bottom5{margin-bottom: 5rem;}


/* -- イメージ画像 -- */
img {
  width: 100%;
  line-height: 0;
  vertical-align: bottom;
  height: auto;
  border-style: none;
}

picture{
  max-width: 100%;
  line-height: 0;
  vertical-align: bottom;
  height: auto;
  border-style: none;
}

/* -- ラップ -- */

.wrap{
  width: var(--wrap-size);
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}

.flexStart,
.flexCenter,
.flexEnd,
.flexSpaceBetween,
.flexSpaceAround {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
}

.flexCenter {justify-content: center;}
.flexStart {justify-content: flex-start;}
.flexEnd {justify-content: flex-end;}
.flexSpaceAround {justify-content: space-around;}
.flexSpaceBetween {justify-content: space-between;}

.flex-justify{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex-wrap,
.flex-wrap2,
.flex-wrap3,
.flex-wrap4,
.flex-wrap5{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-wrap2 > * {
  width: calc(100% / 2);
}

.flex-wrap3 > * {
  width: calc(100% / 3);
}

.flex-wrap4 > * {
  width: calc(100% / 4);
}

.flex-wrap5 > * {
  width: calc(100% / 5);
}

@media screen and (max-width:900px){
  .flex-wrap > * ,
  .flex-wrap2 > * ,
  .flex-wrap3 > * ,
  .flex-wrap4 > * ,
  .flex-wrap5 > * {
    width: 100%;
  }
}

/* -- テーブル -- */
    table,
    tbody{
      width: 100%;
      border-spacing: 0px;
    }

    table.table-bordered{
      border: 1px solid #efefef;
    }

    table.table-striped tr:nth-child(even){
      background: #efefef;
    }

    table.table-bordered th{
      border-bottom: 1px solid #efefef;
    }

   table.table-bordered td + td{
      border-left: 1px solid #efefef;
    }

    th{
      padding:0.5vw 0.5vw; 
      text-align:center; 
    }

   td{
      padding:0 0.6vw 0.3vw; 
    }

    th{
        font-weight : bold;
    }

/* -- フォーム -- */

input[type=text],
input[type=tel],
input[type=email],
input[type=date],
input[type=password],
textarea,
select{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #dfdfdf;
  outline: none;
  -webkit-appearance: none;
}

input[type=color],
input[type=range]{
  width: 100%;
}


input[type=text],
input[type=tel],
input[type=email],
input[type=date],
input[type=url],
input[type=datetime-local],
input[type=password],
input[type=number],
textarea,
select{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: .8em .8em;
  border: 1px solid #dfdfdf;
  outline: none;
  -webkit-appearance: none;
  border-radius: 4px;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=url],
input[type=datetime-local],
input[type=password],
input[type=number],
textarea {
transition: all 0.3s ease;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus {
background-color: #fff !important;
border: 1px solid #1e90ff;
outline: 1px solid #1e90ff;
}

focus {
outline: none;
}

input[type=submit],
input[type=button],
input[type=reset],
button[type=submit],
button[type=button],
button[type=reset]{
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
   padding: 1.4em .8em;
  display: block;
  border: 1px solid #333;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
}

input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
button[type=button][disabled],
button[type=reset][disabled],
button[type=submit][disabled] {
  border: 1px solid #ccc;
  background-color: #ccc;
  cursor: default;
}

label em{
  font-size:70%;
  margin-left:7px;
}

.error{font-size: 70%;padding:10px;color:#f00;}

/* -- ロードアイコン -- */

#load{
  width:100%;
  height:100%;
  top:0;
  left:0;
  position:fixed;
  background-color:#ffffff8c;
}

.loader-bound {
  position:absolute;
  top:50%;
  left:50%;
  width: 80px;
  height: 17px;
  font-size: 0;
  margin-top:-8.5px;
  margin-left:-40px;
}

.loader-bound > * {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  border-radius: 50%;
  background: black;
  -webkit-animation: loader-bound .8s infinite linear;
  -moz-animation: loader-bound .8s infinite linear;
  animation: loader-bound .8s infinite linear;
}
.loader-bound > *:nth-child(2) {
  -webkit-animation-delay: -.6s;
  -moz-animation-delay: -.6s;
  animation-delay: -.6s;
}

.loader-bound > *:nth-child(3){
  -webkit-animation-delay: -.4s;
  -moz-animation-delay: -.4s;
  animation-delay: -.4s;
}
@-webkit-keyframes loader-bound {
0% {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
  opacity: .2;
}
50% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
opacity: .6;
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: .2;
}
}
@keyframes loader-bound {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: .2;
}
50% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
opacity: .6;
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: .2;
}
}


/* -- パンくずリスト -- */
.breadcrumb{
  margin:3rem 0;
}
.breadcrumb ol{
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb ol > * + *:before{
  content: "/";
  margin-left:.4rem;
  margin-right:.4rem;
}

.breadcrumb ol a{
  color: var(--linkColor);
}

.fadeIn{
  animation-name: fadeInAnime;
  animation-fill-mode:backwards;
  animation-duration:3s;
  animation-iteration-count:infinite;
  animation-timing-function:ease;
  animation-delay: 0.5s;
  animation-direction:normal;
}

@keyframes fadeInAnime{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.grayscale a img{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all  0.7s ease;
}

.grayscale a:hover img{
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}


header.header-top{
  position:relative;
  height: 100vh;
  width: 100%;
  background-size:cover;
  background-position: center;
}

header nav{
  position:fixed;
  z-index:1000;
  width:100%;
}

header nav ul{  
  width:var(--header-nav-wrap);
  margin:0 auto;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

header nav ul li{
  width:calc(100% / 3);
}

header nav ul li a{
  padding:8% 0;
  display:block;
  font-weight:bold;
  letter-spacing: .1em;
}


header .header-logo{
  width:100%;
  text-align:center;
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%) translateX(-50%);
  letter-spacing: .1em;
  font-size: 5em;
}

header.header-top picture{
  display:block;
  height: var(--logo_size_pc);
  margin-bottom:.5em;
}

header.header-top picture img{
  width: auto;
  height: 100%;
}

header h1{
  font-weight:bold;
  letter-spacing:var(--h1-spacing);
  margin-left:var(--h1-spacing);
}
  
#posts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#posts article{
  display: block;
  padding:2vw;
  padding-bottom: 3.5vw
}

#posts article h2{
  margin-top:1em;
  font-size:1.1em;
  letter-spacing: .08em;
  font-weight:bold;
}

#posts article p{
  margin-top:.2em;
  font-size:.8em;
  letter-spacing: .08em;
}



/* -------- footer -------- */


.to-top{
  font-weight:bold;
  text-align:center;
  width:100%;
  display:block;
}

footer{
  margin-top:4em;
}

.footer-copyright{
  text-align:center;
  font-size:.8em;
}

.footer-food{
  padding:.5em 0;
}

/* -------- signle -------- */

.single-h1{
  margin-top:3em;
  font-weight:bold;
  letter-spacing:.06em;
}

.single-h2{
  font-size: calc((100vw - 600px) / 140 + (var(--font-size)*.8));
  letter-spacing:.1em;
  font-weight:bold;
}

.signle-css p{
  text-align:justify;
  margin-bottom:3em;
}

.signle-css .flex span{
  padding:calc((100vw - 1200px) / 140 + var(--font-size));
}

.signle-css .pc-design h3,
.signle-css .sp-design h3{
  font-weight:bold;
  font-size: calc((100vw - 600px) / 140 + (var(--font-size)*1.1));
  margin-bottom:1em;
}

.signle-css .pc-design{
  width: 70%;
}

.signle-css .sp-design{
  width: 22%;
}


.lp-wrap2 > * {
  width: 46%;
}

.lp-wrap3 > * {
  width: 29%;
}

.lp-wrap4 > * {
  width: 21%;
}

.link-url{
  font-weight:bold;
  letter-spacing:.1em;
}

.link-url a{
  /* margin-left:.2em; */
  color:var(--linkColor);
  font-size:110%;
}

.pager-nav-next a{
    justify-content: flex-end;
    align-items: center;
    color: inherit;
    display: flex;
    height: 100%;
    line-height: 1.4;
    min-height: 4em;
    padding: 0.6em 1em 0.5em;
    position: relative;
    text-decoration: none;
    transition: box-shadow .25s;
    width: 100%;
}

.pager-nav-next a:before {
    content: "";
  display: block;
  height: 0.5em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  width: 0.5em;
  z-index: 1;
}

.pager-nav-next a:before {
    border-bottom: 1px solid;
    border-right: 1px solid;
    right: 0.35em;
    -webkit-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
}

.pager-nav-prev a{
    align-items: center;
    border-radius: var(--swl-radius--2,0);
    color: inherit;
    display: flex;
    height: 100%;
    line-height: 1.4;
    min-height: 4em;
    padding: 0.6em 1em 0.5em;
    position: relative;
    text-decoration: none;
    transition: box-shadow .25s;
    width: 100%;
}


.pager-nav-prev a:before {
    content: "";
    display: block;
    height: 0.5em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    width: 0.5em;
    z-index: 1;
}

.pager-nav-prev a:before {
    border-bottom: 1px solid;
    border-left: 1px solid;
    left: 0.35em;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
}

.pager-nav-next a picture,
.pager-nav-prev a picture {
    height: auto;
    width: 20%;
  margin:0 .8em;
}

.about-me h2,
.about-me h3{
  font-weight:bold;  
}

.about-me h2{
  font-size:3em;
  letter-spacing:0.1em;
}

.about-me h3{
  font-weight:bold;
  margin-top:3em;
  margin-bottom:1em;
}

.about-me em{
 font-style: normal;
  font-size:.5em;
}

/*
#analy form{
   width: 100%;
}

#analy form input{
   width: 70%;
}

#analy form button{
   width: 20%;
}*/
/* 
#analy form * {
  width:100%;
} */



@media screen and (max-width:640px){
.link-url a{
  /* margin-left:.2em; */
  color:var(--linkColor);
  font-size: 66%;
}
}