@charset "utf-8";
/* CSS Document */
:root {
--fontColor:#572F01;
--primaryColor:#F8F3D3;
--secondaryColor:#FC8800;
--goldColor: #947319;
--bgColor:#FFFDF9;
--redColor:#EC0000;
--whiteColor:#fff;
--yellowColor:#FFFF00;
--btnColor:#1fb10f;
--btndarkColor:#17850b;
--btnshadowColor:#0b4205;
--shadowColor:rgba(0, 0, 0, 0.5);
--glassColor:rgba(255, 255, 255, 0.5);
}
.smalltxt{font-size: 90%;}
.font_small {font-size: 80%;}
.font_ss{font-size: 75%;}
.font_sss{font-size: 65%;}
.font_large {font-size: 130%;}
.font_ll{font-size: 155%;}
.line_center {text-align: center;}
.line_right{text-align: right;}
.line_left{text-align: left;}
.font_bold{font-weight: bold;}
.font_red {color: var(--redColor);}
img {width: auto;max-width: 100%;vertical-align: bottom;}

#lp_plasmalogen{overflow: hidden;font-family: 'Noto Sans JP', sans-serif;line-break: strict;overflow-wrap: break-word;word-wrap: break-word;word-break: normal !important;line-height: 1.8;color: var(--fontColor);background: var(--bgColor);max-width: 1920px;margin: auto;}
#lp_plasmalogen h2 {font-family: 'Noto Sans JP', sans-serif; line-break: strict;word-break: break-word;letter-spacing:inherit;}

#HEADER .global{display: none;}
#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}

/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video, a):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/
*{box-sizing: border-box;}
a {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
text-decoration: none;
  cursor: pointer;
}
a:hover{opacity: 1;}
#container>.wrapContent {
padding: 0;
width: 100%;
}

/*========= LoadingのためのCSS ===============*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100svh;
    background: var(--bgColor);
    z-index: 999;
}
.loader {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  display: inline-grid;
}
.loader:before,
.loader:after {
  content:"Loading...";
  grid-area: 1/1;
  -webkit-mask:linear-gradient(90deg,#000 50%,#0000 0) 0 50%/2ch 100%;
  animation: l11 1s infinite cubic-bezier(0.5,220,0.5,-220);
  color: var(--fontColor);
}
.loader:after {
  -webkit-mask-position:1ch 50%;
  --s:-1;
}
@keyframes l11 {100%{transform: translateY(calc(var(--s,1)*0.1%));}}
/*=========▲ LoadingのためのCSS▲ ===============*/

section {position: relative;margin: 0 auto 7%;padding: 0;z-index: 0;}
#sec01{margin-bottom: 0;}
.mv{position: relative;}
.ctabox{position: absolute;width: 37%;bottom: 10%;right: 1%;}
.ctabox figure {position: relative;}
.btnArea{position: absolute;right: 2.5%;bottom: 2.8%;width: 56%;}
.btnArea a {display: block;background: linear-gradient(180deg, var(--btnColor) 0%, var(--btnColor) 49%, var(--btndarkColor) 51%, var(--btndarkColor) 100%);color: var(--whiteColor);font-weight: bold;font-size: clamp(15px, 2vw, 32px);text-align: center;padding: 0.2em;position: relative;overflow: hidden;box-shadow: 2px 2px 2px 0 var(--btnshadowColor), 3px 2px 5px 0 var(--shadowColor);text-shadow: -2px -2px 0px var(--shadowColor);}
.btnArea a::before{content: "";position: absolute;top: 0;left: -75%;width: 50%;height: 100%;background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%);transform: skewX(-25deg);}
.secInner{max-width: 1290px;width: 86%;margin: 8% auto 6%;position: relative;}

.titleBox{position: relative;background: var(--primaryColor);padding: 3% 0;text-align: center;}
.titleBox::before{content: "";position: absolute;bottom: 0;width: 0;height: 0;border-style: solid;border-width: 4em 6em 0 6em;border-color: var(--primaryColor) transparent transparent transparent;left: 50%;transform: translate(-50%, 100%);}
#lp_plasmalogen h2 {position: relative;margin:auto;font-size: clamp(21px, 2.8vw, 48px);font-weight: bold;line-height: 1.2;display: inline-block;color: var(--fontColor);}
#lp_plasmalogen h2::before {content: "";position: absolute;top: -5%;left: -50%;display: inline-block;width: 46%;height: 100%;background-image: url("plasmalogen/titleillu.png?$staticlink$");background-size: contain;background-repeat: no-repeat;}
.hosoku {
    font-size: clamp(14px, 1.1vw, 17px);
}
.hosoku span {
    display: inline-block;
}
.hosoku span:first-child {
    margin-right: auto;
}
.hosoku span:last-child {
    margin-left: auto;
}

#sec02{background-image: url("plasmalogen/family.png?$staticlink$");background-position: right 108%;background-repeat: no-repeat;margin-top: -3%;}
#lp_plasmalogen #sec02 h3 {margin: 15% auto 8% 0; width: 65%;}
.flexDiv{display: flex;align-items: center;}
#sec02 .flexDiv > div:nth-child(2) {color: var(--secondaryColor);font-size: 80px;}

#sec03{background-image: url("plasmalogen/ikiiki.png?$staticlink$");background-position: left 35%;background-repeat: no-repeat;background-size: 60%;}
.y-line{background: linear-gradient(transparent 40%, var(--yellowColor) 80%);}
#lp_plasmalogen #sec03 h2::before{left: -33%;width: 31%;}
.what{margin: 10% 0 3% auto;width: 55%;background: var(--glassColor);padding: 2em;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);}
#sec03 h4{font-size: clamp(20px, 2.25vw, 36px); font-weight: bold;color: var(--goldColor);text-align: center;margin-bottom: 3%;}
.what p {font-size: clamp(15px, 1.25vw, 20px);font-weight: bold;}
.goldLine{background: var(--whiteColor);border: 1px solid var(--goldColor);border-radius: 10px;padding: 1em;}
#sec03 .flexDiv{align-items: stretch;justify-content: space-around;}
#sec03 .flexDiv > div {flex-basis: 48%;}
figcaption{font-size: clamp(13px, 1vw, 16px);}
.m10{margin-top: 10%;}

#sec04 .flexDiv {align-items: flex-start;}
#lp_plasmalogen #sec04 h2::before{left: -42%;width: 40%;}
.photoArea figure{box-shadow: 3px 3px 10px var(--shadowColor);position: relative;margin-bottom: 20%;}
.photoArea figure img {width: 100%;}
.photoArea figure::before{content: "";position: absolute;top: 20px;left: 20px;width: 100%;height: 100%;background: var(--whiteColor);z-index: -1;}
.photoArea figure::after {content: "";position: absolute;top: 40px;left: 40px;width: 100%;height: 100%;background: var(--secondaryColor);z-index: -2;}
.orangeBox{background: var(--secondaryColor);padding: 1em 2em;color: var(--whiteColor);}
.name{font-size: clamp(19px, 1.75vw, 28px);font-weight: bold;margin-bottom: 0.5em;}
.address{font-size: clamp(18px, 1.4vw, 22px);font-weight: bold;line-height: 1.5;}
.photoArea{flex-basis: 20%;}
.career{flex-basis: 78%;margin-left: 20px;}
.history{margin: 3% 0 0 5%;}
#sec04 .goldLine{padding: 2em;}
#sec04 .goldLine p {font-size: clamp(15px, 1.12vw, 18px);margin-bottom: 1em;}
.kome {color: #6B6B6B;font-size: clamp(12px, 1vw, 15px);display: inline-block;line-height: 1.34}
.illust01{width: 75%;margin: auto;}

#lp_plasmalogen #sec05 h2::before{left: -43%;width: 40%;}
#sec05 .goldLine p{font-size: clamp(16px, 1.4vw, 22px);}
#sec05 .goldLine{padding: 2em 3em;max-width: 1100px;margin: auto;}
#sec05 .flexDiv {justify-content: space-around;max-width: 1100px;margin: 5% auto auto;}
.illustArea {flex-basis: 45%;}
.sumArea {flex-basis: 45%;font-size: clamp(17px, 1.25vw, 20px);}

#lp_plasmalogen #sec06 h2::before{left: -36%;width: 34%;}
#sec06 .flexDiv {justify-content: space-around;}
.figArea{flex-basis: 42%;}
.eviArea{flex-basis: 47%;}
.eviTitle{font-size: clamp(19px, 1.6vw, 26px);font-weight: bold;margin-bottom: 1.5em;}
.eviArea dl {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 3em;}
.eviArea dt {background: var(--secondaryColor);color: var(--whiteColor);font-size: clamp(17px, 1.25vw, 20px);font-weight: bold;flex-basis: 20%;text-align: center;}
.eviArea dd {font-size: clamp(17px, 1.25vw, 20px);font-weight: bold;flex-basis: 75%;line-height: 1.3;}
dd .smalltxt{font-weight: normal;display: block;margin-top: 1em;}
.mt5{margin-top: 5%;}

#sec06 .goldLine{max-width: 1070px;margin: 5% auto;position: relative;}
.goldLine .point01 {position: relative;font-size: clamp(24px, 2.4vw, 38px);color: var(--secondaryColor);font-weight: bold;text-align: center;}
.point01 p {margin-right: 15%;}
.ab_man{position: absolute;right: 4%;bottom: -13%;width: 16%;}

.orangetxt{color: var(--secondaryColor);}
#lp_plasmalogen #sec07 h2::before {left: -32%;width: 30%;}
.txtArea{font-size: clamp(19px, 1.75vw, 28px);font-weight: bold;}
.txtArea .lr {font-size: clamp(24px, 2.4vw, 38px);font-weight: bold;color: var(--redColor);display: block;}
#sec07 .flexDiv{justify-content: center;}
.imgArea > figure {width: 80%;margin-left: 15px;}
.flexDiv2{display: flex;justify-content: center;margin: 3%;}
.flexDiv3{display: flex;justify-content: space-around;}
.flexDiv3 .figArea {flex-basis: 48%;margin: 0 1% 5%;}
.flexUl{display: flex;justify-content: space-between;margin-top: 15px;}
.flexUl li {flex-basis: 50%;line-height: 1.4;}
.goldLine .point02 {position: relative;font-size: clamp(15px, 1.25vw, 20px);padding: 1em;}
.point02 p {margin-left: 27%;line-height: 1.5;}
.point02 p.smalltxt{margin-top: 2em;display: inline-block;}
.ab_woman{position: absolute;left: 3%;bottom: -6%;width: 20%;}
.m3{margin-top: 3%;}
#lp_plasmalogen #sec08 h2::before {left: -48%;height: 187%;top: -59%;}
#lp_plasmalogen #sec09 h2::before {left: -76%;height: 196%;top: -60%;width: 72%;}
.goldLine .point03 {position: relative;font-size: clamp(17px, 1.25vw, 20px);padding: 1em 2em;}
.point03 p {margin-right: 28%;line-height: 1.5;}
.ab_kojotyo{position: absolute;right: 4%;bottom: -13%;width: 20%;}
#sec08 .goldLine{margin: 11% auto 6%;}
.PhotoArea{max-width: 744px;margin: auto;}
.material{font-size: clamp(15px, 1.15vw, 18px); margin: 3% auto;}
.dlFaq{margin: 4% auto;padding: 2.5em 3.5em;background: var(--whiteColor);border: 1px solid var(--goldColor);border-radius: 10px;}
.dlFaq dt {font-size: clamp(17px, 1.6vw, 26px);font-weight: bold;padding-left: 1em;text-indent: -1em;}
.dlFaq dd {font-size: clamp(17px, 1.6vw, 26px);font-weight: bold;color: var(--secondaryColor);padding-left: 2.5em;}

#lp_plasmalogen .banner {
    display: none;
    position: fixed;
    margin: 0;
    z-index: 3;
    bottom: 1%;
    right: 85px;
    width: 26%;
    transition: all .5s;
}
#lp_plasmalogen .banner.hide{opacity: 0;}
    
#lp_plasmalogen .banner a {
    text-decoration: none;transition: all .5s;
}

#lp_plasmalogen .banner-icon {
    color: #f8f8f8;
    font-size: 26px;
    font-weight:bold;
}

#lp_plasmalogen .banner-back {
}

#lp_plasmalogen .bannerImg img {  filter: drop-shadow(0px 6px 8px var(--shadowColor));}

#lp_plasmalogen .Pbanner-close {
    display: none;
}
#lp_plasmalogen .onlySPC, .onlyPc {display: block;}
#lp_plasmalogen .cta_btnArea {
    position: absolute;
    right: 25%;
    bottom: 7%;
    width: 71%;
}
#lp_plasmalogen .cta_btnArea a {
    display: block;
    background: linear-gradient(180deg, var(--btnColor) 0%, var(--btnColor) 49%, var(--btndarkColor) 51%, var(--btndarkColor) 100%);
    color: var(--whiteColor);
    font-weight: bold;
    font-size: clamp(15px, 1.7vw, 32px);
    text-align: center;
    padding: 0.2em;
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 2px 0 var(--btnshadowColor), 3px 2px 5px 0 var(--shadowColor);
    text-shadow: -2px -2px 0px var(--shadowColor);
    line-height: 1.8;
}
#lp_plasmalogen .cta_btnArea a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%);
    transform: skewX(-25deg);
}

@media (any-hover: hover) {
/*:hover はここに書く*/
#lp_plasmalogen .cta_btnArea a:hover::before{animation: shine 0.7s;}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

.sp-cam {display: none !important;}
.pad-cam {display: none !important;}
.pad-sp {display: none !important;}
.pc-cam {display: block;}
.pc-pad {display: block!important;}
#lp_plasmalogen .onlySp{display: none;}

/************************************************************/@media screen and (max-width: 1500px) {
    #lp_plasmalogen .banner{width: 30%;}
    #lp_plasmalogen .Pbanner-close{top: -2%;}
    }
/************************************************************/@media screen and (max-width: 1400px) {
  #sec02{background-size: 70%;background-position: right 40%;}
}

/************************************************************/@media screen and (max-width: 1279px) {
  #HEADER .global{display: block !important;}
}

/************************************************************/@media screen and (max-width: 820px) {
  #sec03{background-size: contain;background-position: left 10%;}
  .what{margin: 60% auto 3%;width: 100%;}
  #sec03 .flexDiv{flex-direction: column;}
  #sec03 .flexDiv > div {margin-bottom: 5%;}
  #sec05 .flexDiv{flex-direction: column;}
  .illustArea{margin-bottom: 5%;}
  #lp_plasmalogen #sec04 h2::before{left: -36%;}
  #lp_plasmalogen #sec03 h2::before{left: -30%;}
  .secInner{margin: 12% auto 8%;}
  #sec06 .flexDiv{flex-direction: column;}
  .figArea{margin-bottom: 10%;}
  #lp_plasmalogen #sec07 h2::before{left: -28%;}
  figure{text-align: center;}
  .flexDiv3{flex-direction: column;}
  .flexDiv3 .figArea{margin: 0 1% 10%;}
  .point02 p{margin-left: 30%;}
  .ab_woman{left: 0;width: 30%;}
  .ab_kojotyo{right: 0;width: 26%;}
  
.pad-cam {display: block !important;}
.pad-sp {display: block !important;}
.pc-pad {display: block!important;}
.sp-cam {display: none !important;}
}
/************************************************************/@media screen and (max-width: 768px) {
    #lp_plasmalogen .banner {
        width: 100%;
        margin: 0;
        z-index:99;
        position: fixed;
        bottom: 1%;
        right: 0;
        left: 0;
    }
  #lp_plasmalogen .banner.hide{
    z-index: 0;
  }
    #lp_plasmalogen .banner-icon {
   	    color: #F8F8F8;
        font-size: 24px;
    }
    #lp_plasmalogen .banner-body {
    }
    #lp_plasmalogen .banner-back {
    }
    #lp_plasmalogen .banner-bottom {
    }
    #lp_plasmalogen .banner a{text-decoration: none;}
    #lp_plasmalogen .onlyPc{display: none;}
    #lp_plasmalogen .onlySp{display: block;}
    #lp_plasmalogen .Pbanner-close{top: -12%;right: 4%;font-size: 20px;padding: 1% 2%;}
    #lp_plasmalogen .cta_btnArea{right: 28%;bottom: 11%;width: 63%;}
    #lp_plasmalogen .cta_btnArea a{font-size: 37px;}
    }
/************************************************************/@media screen and (max-width: 700px) {
  #sec02{background-size: contain;background-position: right 80%;margin-top: 0;}
  #lp_plasmalogen #sec02 h3{width: 100%;margin: 34% auto 2%;}
  #sec02 .flexDiv > div:nth-child(2){font-size: 40px;}
  .ctabox{width: 70%;bottom: 3%;right: 22%;}
  .btnArea{bottom: 0;width: 100%;}
  .btnArea a{font-size: clamp(21px, 2vw, 32px);}
  #lp_plasmalogen h2::before{display: none;}
  .titleBox::before{border-width: 2em 4em 0 4em;}
  .what{margin-top: 68%;padding: 1em;}
  #sec04 .flexDiv{flex-direction: column;align-items: center;}
  .career{flex-basis: 100%;margin-left: 0;}
  .history{margin: 3% 0 0;}
  #sec05 .goldLine{padding: 1em 2em;}
  .eviArea dt{flex-basis: 23%;font-size: 15px;}
  .eviArea dd{flex-basis: 73%;}
  .eviArea dl{margin-bottom: 1.5em;}
  .goldLine .point01{font-size: 17px;line-height: 1.4;}
  .ab_man{right: -5%;bottom: -15%;width: 23%;}
  #sec07 .flexDiv{flex-direction: column;}
  .txtArea{text-align: center;margin-bottom: 3%;}
  .flexUl{flex-direction: column-reverse;margin-top: 5px;}
  .flexUl li:first-child{margin-top: 5%;}
  .point02 p{margin-left: 0;}
  .point02 p.smalltxt {margin-left: 30%;}
  .ab_woman{bottom: -4%;left: -9%;width: 38%;}
  .goldLine .point03{font-size: clamp(15px, 1.25vw, 20px);padding: 1em;}
  .point03 p{margin-right: 0;margin-bottom: 10%;}
  .ab_kojotyo{bottom: -9%;right: -3%;width: 28%;}
  .dlFaq{padding: 1.5em;}
  .dlFaq dd{padding-left: 1.5em;}
    #lp_plasmalogen .cta_btnArea a{font-size: clamp(21px, 2.3vw, 37px);} 
  #lp_plasmalogen .banner{width: 96%;left: 1.5%;}
  #lp_plasmalogen .cta_btnArea{right: 26%;width: 70%;}
  #lp_plasmalogen .Pbanner-close{top: -26%;right: -1%;font-size: 18px;padding: 1% 2.7%;}

.sp-cam {display: block !important;}
.pad-sp {display: block !important;}
.pc-cam {display: none !important;}
.pad-cam {display: none !important;}
.pc-pad {display: none !important;}
}