@charset "utf-8";

/* CSS Document */


/* ------------------------------------------
  reset
--------------------------------------------- */

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

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

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after {
    content: "";
    content: none;
}

q:before,
q:after {
    content: "";
    content: none;
}

abbr {
    text-decoration: none;
}

mark {
    background: none;
}

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

caption,
th {
    text-align: left;
}

img {
    vertical-align: top;
}

hr {
    height: 0;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
    overflow-x: hidden;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-size: 18px;
    line-height: 1.75;
    font-family: 'Noto serif JP', sans-serif;
    color: #212121;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: break-all;
    letter-spacing: 1px;
    -webkit-font-feature-settings: "palt";
    -moz-font-feature-settings: "palt";
    font-feature-settings: "palt";
}

a {
    color: #333;
    text-decoration: none;
}

/*a:not(.btn):hover {
    opacity: 0.75;
    transition: all 0.1s 0s ease;
}*/

button:focus {
    outline: none;
}


/*a[href^="tel"] {
    color: #fff;
    pointer-events: none;
}*/

.select:focus,
input:focus {
    outline: none;
}

.pc-hide {
    display: none !important;
}

.sp-hide {
    display: block !important;
}

.strong {
    font-weight: 700;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left !important;
}


/* ------------------------------------------
  common
--------------------------------------------- */
/*header*/

.header {
    background: #fff;
    text-align: center;
    color: #292952;
    padding: 15px 0 20px;
}

.header-inner {
}

.header .logo {
}

.header a {
    position: relative;
    display: inline-block;
}

.header a:hover {
    opacity: 1;
    color: #fff;
}

.header li a span{
    position: relative;
    z-index: 2;
}

.header li a:after {
    content: "";
    display: block;
    width: 120%;
    height: 100%;
    position: absolute;
    transition: all .3s;
    background: #212121;
    left: -10%;
    bottom: -1px;
    opacity: 0;
}

.header li a:hover:after {
    opacity: 1;
}

.gnav {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-top: 25px;
    font-size: 18px;
}

.gnav li{
    position: relative;
    padding: 0 20px;
}

.gnav li:before{
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 2px;
}

.gnav li:last-child:after{
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #ccc;
    position: absolute;
    right: 0;
    top: 2px;
}



/*footer*/

.footer {
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 2vh 0;
    background: #fff;
}

/* ------------------------------------------
  page-top
--------------------------------------------- */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #fff;
    text-decoration: none;
    color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    display: block;
    box-shadow: 0px 0px 16px -6px rgb(0 0 0 / 70%);
}
#page-top a:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 55%;
    border-top: 3px solid #292952;
    border-left: 3px solid #292952;
    margin-right: -10%;
}

/* ------------------------------------------
  section
--------------------------------------------- */
section{
    background: #fff;
}

.block {
    width: 100%;
    padding: 80px 0 100px;
    position: relative;
}

/* ------------------------------------------
  midashi
--------------------------------------------- */
.head-lv02{
    text-align: center;
    padding-bottom: 25px;
}

.head-lv02 span{
    font-size: 32px;
    line-height: 1;
    letter-spacing: 6px;
    color: #292952;  
    display: inline-block;
    width: 100%;
}

.head-lv02 small{
    font-family: 'Noto Serif', serif;
    font-size: min(3.2vw,18px);
    line-height: 1;
    letter-spacing: 2px;
    color: #bc1d1d;    
}

/*head-lv02-tate*/

.head-lv02-tate{
    display: inline-flex;
    align-items: center;
    position: relative;
}

.head-lv02-tate small{
    font-family: 'Noto Serif', serif;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 2px;
    color: #bc1d1d;   
    position: absolute;
    white-space: nowrap;
}

.head-lv02-tate span{
    font-size: 34px;
    line-height: 1;
    letter-spacing: 6px;
    color: #292952;  
    display: inline-block;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/* ------------------------------------------
  para
--------------------------------------------- */
.para{
    height: 200px;
    display: none;
}

.para:before {
    content: "";
    width: 100%;
    height: 100vh;
    background: #fff url(../images/pc/para.webp) center no-repeat;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    display: block;
}

.para-on{
    display: block;
}

/* ------------------------------------------
  cvArea
--------------------------------------------- */
.cvArea{
    padding: 50px 0 70px;
    text-align: center;
}

.cvArea-bg{
    background: #f5f5f5;
}

.cvArea-text{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    color: #292952;
    padding-bottom: 5px;
}

.cvArea-text span{
    color: #cc2014;
}


/* ------------------------------------------
  btn
--------------------------------------------- */
.btn-l{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    text-decoration: none;
    width: 540px;
    height: 80px;
    border-radius: 6px;
    color: #fff;
    background: #711717;
    position: relative;
    padding-bottom: 1px;
    overflow: hidden;  
    font-size: 22px;
    transition: all .3s;
}

.btn-l:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 47%;
    right: 35px;
}

.btn-l:hover{
    animation: move 0.5s infinite alternate ease-in-out;
}

@keyframes move {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(5px);
    }
}


.btn-s{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    text-decoration: none;
    width: 130px;
    height: 35px;
    border-radius: 100px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #fff;
    background: #711717;
    position: relative;
    padding-bottom: 1px;
}

.lineup-link{
    display: block;
}

.lineup-link:hover{
    animation: move 0.5s infinite alternate ease-in-out;
}

@keyframes bound {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(5px);
    }
}


/* ------------------------------------------
  mv
--------------------------------------------- */
.mv-wrap {
    position: relative;
}

.mv-lead {
    position: absolute;
    z-index: 2;
    width: 1100px;
    left: 50%;
    margin-left: -550px;
    top: 0;
    text-align: right;
    padding: 50px 50px;
}

.mv{
    position: relative;   
    background: #fff;
}

.mv-inner{
}

.mv > li:nth-child(3),
.mv > li:nth-child(4){
    display: none;
}

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

.mv-arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 170px;
    height: 170px;
    left: 50%;
    bottom: -85px;
    margin-left: -85px;
    border-radius: 85px;
    background: #fff;
    text-align: center;
    padding-top: 15px;
}

.scrolldown{
    position: absolute;
    left: 50%;
    animation: arrowmove 1s ease-in-out infinite;
    display: block;
    width: 22px;
    height: 22px;
    margin-left: -11px;
}

.mv-slider{
    height: 550px;
    overflow-y: hidden;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

.scrolldown:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-top: 1px solid #273057;
    border-right: 1px solid #273057;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(135deg) translateY(-50%);
    position: absolute;
    bottom: 60px;
}

/* ------------------------------------------
  itemList-link
--------------------------------------------- */
.itemList-link{
    background: url(../images/pc/itemList-link-bg.webp) repeat-x;
    padding: 20px 0 35px;
    text-align: center;
}

.itemList-link p{
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    padding-bottom: 5px;
}

.itemList-link p span{
    color: #cc2014;
}

.itemList-link .btn{
    width: 640px;
    background: #273058;
}

.itemList-link .btn:after{
    transform: rotate(135deg) translateY(0%);
    top: 40%;
}

/* ------------------------------------------
  introduction
--------------------------------------------- */
.introduction-block{
    padding: 80px 0 90px;
    position: relative;
    display: flex;
    justify-content: center;
}

.introduction-inner{
    height: 320px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.introduction-title{
    font-size: 26px;
    line-height: 2;
    letter-spacing: 6px;
    color: #292952;
    position: relative;
    padding-right: 135px;
}

.introduction-title:before{
    content: "";
    background: url(../images/pc/shiawase-logo.webp) no-repeat center;
    background-size: 80px;
    display: block;
    width: 90px;
    height: 100px;
    position: absolute;
    top: 65px;
    right: 0;
}

.introduction-text{
    line-height: 2.2;
    padding: 0 60px;
    letter-spacing: 2px;
}

/* ------------------------------------------
  howtoeat
--------------------------------------------- */
.howto-inner {
    width: 920px;
    margin: 0 auto;
    padding: 100px 0 80px;
    position: relative;
}

.howto-title{
    position: absolute;
    left: -13px;
    top: 70px;
    background: #fff;
    padding: 0 30px 30px 0;
}

.howto-title img{
    width: 100%;
}

.howto-step{
    border: 1px solid #292952;
    text-align: center;
    padding: 65px 0 35px;
}

.howto-step ul{
    display: flex;
    justify-content: center;
}

.howto-step li{
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
    padding: 0 15px 20px 15px;
}

.howto-step li:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent #711717;
    position: absolute;
    top: 100px;
    right: -8px;
}

.howto-step li:last-child:after{
    content: none;
}

.howto-step li span{
    color: #711717;
}

.howto-step li figcaption{
    padding-top: 10px;
}

.howto-step li figure{
}

.howto-step li img{
}

.howto-nikoniko{
    text-align: center;
    background: #faeded;
    width: 730px;
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 2px;
    padding: 5px;
}

.howto-nikoniko span{
    color: #bc1d1d;
    font-weight: 500;
    margin-right: 10px;
}

.howto-nikoniko span:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #bc1d1d;
    position: relative;
    top: 1px;
    margin-left: 10px;
}

.howto-nikoniko a{
    text-decoration: underline;
}




/* ------------------------------------------
  dokodemo
--------------------------------------------- */
.dokodemo{
    width: 100%;
    height: 320px;
    background: url(../images/pc/dokodemo-bg.webp) no-repeat center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dokodemo-title{
    font-size: 30px;
    color: #292952;
    padding-bottom: 10px;
    letter-spacing: 5px;
}

.dokodemo p {
    letter-spacing: 2px;
}

/* ------------------------------------------
  lineup
--------------------------------------------- */
.lineup{
    padding: 90px 0 110px 50px;
}

.lineup-inner{
    position: relative;
    width: 1110px;
    margin: 0 auto;
    display: flex;
}

.lineup-title{
    position: absolute;
    right: 0;
    top: 00;
}

.lineup-list {
    display: flex;
    flex-wrap: wrap;
}

.lineup-list li{
    width: 250px;
    margin: 0 25px 40px;
}

.lineup-list li:nth-last-child(-n+3){
    margin-bottom: 0;
}

.lineup-image {
    padding-left: 25px;
}

.lineup-text {
    text-align: center;
}

.item-name {
    font-size: 18px;
    line-height: 1.5;
    padding-bottom: 10px;
}

.lineup-text p{
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
    padding-bottom: 25px;
    font-size: 14px;
}

.recipe-list .lineup-list-inner {
}

.recipe-list li{
    margin: 0 25px;
}

.recipe-list .lineup-image {
    padding-bottom: 15px;
    padding-left: 0;
}

.recipe-list img{
    width: 100%;
}

.recipe-list .item-name{
    padding-bottom: 15px;
}


/* ------------------------------------------
  lineup-new
--------------------------------------------- */
.lineup-new{
    padding: 60px 0 60px 50px;
    background: url(../images/pc/review-bg.webp) repeat;
    background-size: 850px;
}

.lineup-new-inner{
    position: relative;
    width: 1110px;
    margin: 0 auto;
    display: flex;
}

.lineup-list-wrap{
    width: 920px;
}

#lineup .lineup-list{
    width: 860px;
    margin: 0 auto;
}

.lineup-new .lineup-list li {
    width: 180px;
    margin: 0 25px 5px;
}

.lineup-new .lineup-image {
    padding-left: 30px;
}

.lineup-new .lineup-image img {
    width: 160px;
    height: auto;
}

[class^="lineup-slider-arrow-"] {
    position: absolute;
    top: 30%;
}

[class^="lineup-slider-arrow-"]:hover {
    cursor: pointer;
}

.lineup-slider-arrow-next{
    right: -40px;
}

.lineup-slider-arrow-prev{
    left: 0px;
}

/* ------------------------------------------
  kodawari
--------------------------------------------- */
.kodawari-title{
    background: #f5f5f5 url(../images/pc/kodawari-title.webp) no-repeat center;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 180px;
}

.kodawari-title h2{
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: 2px;
    color: #292952;
    padding-bottom: 25px;
}

.kodawari-title-lead{
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 2px;
    line-height: 1.75;
    font-size: 16px;
}

.kodawari-list-item {
    height: 410px;
    position: relative;
    display: flex;
    align-items: center;
}

.kodawari-list-item01{
    background: url(../images/pc/kodawari-img01.webp) no-repeat center;  
}


.kodawari-list-item02 {
    background: url(../images/pc/kodawari-img02.webp) no-repeat center;  
}

.kodawari-list-item03 {
    background: url(../images/pc/kodawari-img03.webp) no-repeat center;  
}

.kodawari-list-item-inner{
    width: 980px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

.kodawari-list-item02 .kodawari-list-item-inner{
    justify-content: flex-start;
}

.kodawari-list-text{
    position: relative;
    background: #fff;
    height: 310px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 34px 60px 20px 60px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 12%);
}

.kodawari-list-text h3{
    font-size: 24px;
    color: #292952;
    line-height: 1.5;
    letter-spacing: 2px;
    padding-left: 25px;
}

.kodawari-list-text p{
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 2.1;
    letter-spacing: 0;
    font-size: 17px;
}

.kodawari-list-num{
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    text-align: center;
    top: -10px;
    right: -10px;
}

.kodawari-list-num:after {
    width: 57px;
    height: 57px;
    transform: rotate(45deg);
    background: #292952;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

.kodawari-list-num span{
    position: absolute;
    z-index: 1;
    font-size: 24px;
    writing-mode: initial;
}

/* ------------------------------------------
  review
--------------------------------------------- */
.review{
    background: url(../images/pc/review-bg.webp) repeat;
    padding: 50px 0 90px;
    background-size: 850px;
}

.review-list{
    width: 1110px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.review-item{
    position: relative;
    background: #fff;
    width: 340px;  
    padding: 20px 25px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 12%);
}

.review-summary{
    display: flex;
    align-items: flex-start;
    padding-bottom: 15px;
}

.review-summary img{
    width: 100%;
    height: auto;
}

.review-summary-img{
    width: 88px;
}

.review-summary-text {
    width: calc(100% - 85px);
    padding-left: 10px;
    position: relative;
    top: -2px;
}

.review-summary-text span{
    font-size: 12px; 
    line-height: 1;
    color: #fff;
    background: #292952;
    padding: 3px 8px 4px;
    margin-bottom: 5px;
    display: inline-block;
}

.review-text{
    font-family: 'Noto Sans JP', sans-serif;
}

.review-summary-text p{
    font-size: 22px;
    line-height: 1.25;
    color: #292952;
    letter-spacing: 2px;
}

.review-content{
    line-height: 1.75;
    padding-bottom: 1.5vh;
}

.review-content span{
    color: #d42626;
}

.review-name{
    text-align: right;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.5;
    color: #292952;  
}

/* ------------------------------------------
  loading
--------------------------------------------- */
#loading-bg {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

#lead-fadeIn{
  opacity: 0;
  transform : translate(0, 30px);
  transition : all 1000ms;
}

#lead-fadeIn.lead-fadeIn-active {
  opacity: 1;
  transform: translateY(0);
}

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    text-align: center;
}

#kv-lead {
    opacity: 0;
    -webkit-transition: all 2s;
    transition: all 2s;
    transform: translateY(15px);
}

#kv-lead.kv-lead-loaded {
    opacity: 1;
    transform: translateY(0);
}

/*fadein*/
.fadein{
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein-active{
  opacity: 1;
  transform: translate(0, 0);
}

/*introduction*/
.introduction-title.fadein-active {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
}

.introduction-lead.fadein-active {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
}

.introduction-img.fadein-active {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
}

.introduction-title.fadein-active {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
}


/* ------------------------------------------
  lineup
--------------------------------------------- */
#ItemSlide {
  width: 920px;
  height: 780px;
}
#ItemSlide #ItemSlide_list {
  position: relative;
  height: 780px;
  overflow: hidden;
}
#ItemSlide #ItemSlide_list .item {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
    background: #fff;
}
#ItemSlide #ItemSlide_list .item.active {
  display: block;
  z-index: 10;
}
#ItemSlide #ItemSlide_ui {
    position: absolute;
    top: 185px;
    right: 98px;
}
#ItemSlide #ItemSlide_ui li {
  display: inline-block;
  background-color: #c9c9c9;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  margin-right: 10px;
}
#ItemSlide #ItemSlide_ui li span {
  display: block;
  width: 12px;
  height: 12px;
  cursor: pointer;
}
#ItemSlide #ItemSlide_ui li.selected {
  background-color: #292952;
}