@charset "utf-8";
@font-face {
    font-family: "Noto Sans JP";
    font-display: swap;
    font-weight: 700;
    src: url("../fonts/NotoSansJP-Bold.woff2")format("woff2"), url("../fonts/NotoSansJP-Bold.woff")format("woff"), url("../fonts/NotoSansJP-Bold.eot")format("eot"), url("../fonts/NotoSansJP-Bold.ttf")format("truetype");
}
@font-face {
    font-family: "Noto Sans JP";
    font-display: swap;
    font-weight: 600;
    src: url("../fonts/NotoSansJP-SemiBold.woff2")format("woff2"), url("../fonts/NotoSansJP-SemiBold.woff")format("woff"), url("../fonts/NotoSansJP-SemiBold.eot")format("eot"), url("../fonts/NotoSansJP-SemiBold.ttf")format("truetype");
}
@font-face {
    font-family: "Noto Sans JP";
    font-display: swap;
    font-weight: 500;
    src: url("../fonts/NotoSansJP-Medium.woff2")format("woff2"), url("../fonts/NotoSansJP-Medium.woff")format("woff"), url("../fonts/NotoSansJP-Medium.eot")format("eot"), url("../fonts/NotoSansJP-Medium.ttf")format("truetype");
}
@font-face {
    font-family: "Noto Sans JP";
    font-display: swap;
    font-weight: 400;
    src: url("../fonts/NotoSansJP-Regular.woff2")format("woff2"), url("../fonts/NotoSansJP-Regular.woff")format("woff"), url("../fonts/NotoSansJP-Regular.eot")format("eot"), url("../fonts/NotoSansJP-Regular.ttf")format("truetype");
}
@font-face {
    font-family: "Open Sans", sans-serif;
    font-display: swap;
    font-weight: 600;
    src: url("../fonts/OpenSans_Condensed-SemiBold.eot.woff2")format("woff2"), url("../fonts/OpenSans_Condensed-SemiBold.eot.woff")format("woff"), url("../fonts/OpenSans_Condensed-SemiBold.eot.eot")format("eot"), url("../fonts/OpenSans_Condensed-SemiBold.eot.ttf")format("truetype");
}


a:link {
    text-decoration: none;
}
html,
body {
    margin: 0;
    height: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0 auto;
    padding: 0;
    font-size: 15px;
    line-height: 1.6em;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
    color: #333;
    letter-spacing: 0.05em;
}
a:link {
    color: #222937;
}
img {
    max-width: 100%;  
    vertical-align: bottom;
}
ul, ol, li {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5 {
    font-weight: 500;
}
p,span {
    padding: 0;
    margin: 0;
}
/* -----------------------------------------------------------------------------
　list
----------------------------------------------------------------------------- */
dl dt,
dl dd {
    padding: 0;
    margin: 0;
}
ul.list {
    padding-left: 16px;
    margin-top: 20px;
}
ul.list li {
    text-align: left;
    list-style: disc;
}
ol.list {
    padding-left: 20px;
    margin-top: 20px;
}
ol.list li {
    text-align: left;
    list-style: decimal;
}
/* -----------------------------------------------------------------------------
　wrapper section 
----------------------------------------------------------------------------- */
.wrapper{
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
    position: relative;
}
.main {
    display: block;
    margin-bottom: 40px;
}
.sec-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
section > .sec-inner p {
    text-align: left;
    font-weight: 400;
}

/* -----------------------------------------------------------------------------
　header
----------------------------------------------------------------------------- */
#header {
    width: 100%;
    background: #FFF;
    border-bottom:solid 1px #CCC;
}
#header .header-inner {
    width: 100%;
    padding: 50px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 250px;
}
#header h1 {
    max-width: 300px;
    margin: 0 auto 20px;
    padding: 0;
}
#header h1 img {
    width: 100%;
}
#header .nav-wrapper {
    display: flex;
    justify-content: center;
    width:100%;
}

#menu-onlineshop {
    position: absolute;
    top:60px;
    right: 50px;
    z-index: 9999;
    text-align: center;
}
#menu-onlineshop a {
    width: 60px;
    height: 60px;
    border:solid 1px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
#menu-onlineshop a img {
    width: 55%;
    margin: auto;
}
#menu-onlineshop p {
    font-size: 11px;
    text-align: center;
    transform: scale(0.7);
}


.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.menu li+li {
    margin-left: 80px;
}
.menu li a {
    display: block;
    padding: 15px 0 12px;
    line-height: 1em;
    font-size: 24px;
    text-align: center;
    font-family: "Playwrite DE Grund", cursive;
    font-weight: 400;
    font-style: normal;
    color: #222;
}
.menu li a span {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-family: Arial, "Helvetica Neue", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}


#header ul.h-sns-list {
    display: none;
}


/* -----------------------------------------------------------------------------
　タイトル
----------------------------------------------------------------------------- */

h2.sec-ttl {
    font-size: clamp(2rem, 1.318rem + 3.41vw, 3.875rem);
    text-align: center;
    margin-bottom: 40px;
    color: #222;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}
h3.sec-ttl  {
    font-size: 13px;
    text-align: left;
    padding-left: 0;
    margin-bottom: 15px;
}
p.sec-ttl-subtext {
    font-size: clamp(2.375rem, 2.057rem + 1.59vw, 3.25rem);
    color:#DB002F;
    text-align: left;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}
p.sec-ttl-subtext.col_blue {
    color:#222937 !important;
    font-size:clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem);
}

h3.sub-ttl {
    font-weight: 600;
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    text-align: left;
    margin-bottom: 25px;
}


/* -----------------------------------------------------------------------------
 moreview ボタン
----------------------------------------------------------------------------- */
.moreview {
    margin-top: 40px;
}
.moreview .btn {
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: #FFFFFF;
  background-color: #e94d5b;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius: 32px;
}
.moreview .btn:hover {
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.moreview .text {
  position: relative;
}

#whatis .moreview .btn {
  background-color: #222;
}

#f-head {
    width: 100vw;
    background: url(../img/common/f-head_bg.jpg) no-repeat center top;
    background-size: cover;
}
#f-head .sec-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}
#f-head .sec-inner img {
    width: 40%;
}
/* -----------------------------------------------------------------------------
 footer
----------------------------------------------------------------------------- */
footer {
    position: relative;
    background: #231815;
    padding: 40px 0 25px;
}
footer .sec-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 0 30px;
    color: #FFF;
}
footer #f-nav {
    display: flex;
    justify-content: space-between; 
    width: calc(100% - 300px);
}
footer #f-nav .f-nav-list {
    width: 31%;
}
footer #f-nav .f-nav-list h3 {
    text-align: left;
    margin-bottom: 15px;
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom:solid 1px #CCC;
}
footer #f-nav .f-nav-list ul li {
    text-align: left;
}
footer #f-nav .f-nav-list ul li a {
    color: #FFF;
    font-size: 13px;
    line-height: 1.1em;
}
footer #f-nav .f-nav-list ul li a span {
    font-size: 11px;
    opacity: 0.6;
    display: inline-block;
    margin-left: 5px;
}
footer li a:hover {
    opacity: 0.6;
}
footer .copyright {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-align: center;
    color: #FFF;
}
footer #f-sns-list {
    margin-bottom: 20px;
    width: 200px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
footer #f-sns-list li+li {
    margin-left: 20px;
}
footer #f-sns-list li a {
    display: block;
}




/* -----------------------------------------------------------------------------
　アニメーション
----------------------------------------------------------------------------- */

.inview.fadeup {
	opacity: 0;
	transition-duration: 1s;
	transform: translateY(60px);
}
.inview.fadeup.active {
	opacity: 1;
	transform: translateY(0px);
}
.inview.fadedown {
	opacity: 0;
	transition-duration: .5s;
	transform: translateY(-10px);
}
.inview.fadedown.active {
	opacity: 1;
	transform: translateY(0px);
}
.inview.fadeleft {
	opacity: 0;
	transition-duration: .5s;
	transform: translateX(-10px);
}
.inview.fadeleft.active {
	opacity: 1;
	transform: translateX(0px);
}
.inview.faderight {
	opacity: 0;
	transition-duration: .5s;
	transform: translateX(10px);
}
.inview.faderight.active {
	opacity: 1;
	transform: translateX(0px);
}
.delay01 {
	transition-delay: .3s;
}
.delay02 {
	transition-delay: .5s;
}
.delay03 {
	transition-delay: .7s;
}
.delay04 {
	transition-delay: .9s;
}
.delay05 {
	transition-delay: 1.1s;
}

@media(max-width: 480px) {
    .inview.fadeup {
        opacity: 0;
        transition-duration: 1s;
        transform: translateY(40px);
    }
}


/* -----------------------------------------------------------------------------
改行
----------------------------------------------------------------------------- */
.pc {
    display: block;
}
.sp {
    display: none;
}
.sp480 {
        display: none;
    }
.sp320 {
    display: none;
}
@media(max-width: 540px) {
    .pc {
    display: none;
    }
    .sp {
        display: block;
    }
}
@media(max-width: 320px) {
    .sp320 {
        display: block;
    }
}

/* -----------------------------------------------------------------------------
　Margin Top
----------------------------------------------------------------------------- */
.marT60 {
    margin-top: 60px;
}
.marB60 {
    margin-top: 60px;
}

.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}

/* -----------------------------------------------------------------------------
　Padding Top
----------------------------------------------------------------------------- */
.padTB60 {
    padding-top: 60px;
    padding-bottom: 60px;
}
.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pt15 {padding-top:15px !important;}
.pt20 {padding-top:20px !important;}
.pt25 {padding-top:25px !important;}
.pt30 {padding-top:30px !important;}
.pt35 {padding-top:35px !important;}
.pt40 {padding-top:40px !important;}
.pt45 {padding-top:45px !important;}
.pt50 {padding-top:50px !important;}