@charset "UTF-8";

@media screen and (max-width:834px){

:root {
  --std-width: 360px;
  --SP-width: 94%;
  --std-fz: 14px;

  --fz-h2: 28px;
  --fz-h3: 20px;
  --fz-h4: 17px;
  --fz-h5: 16px;
  --fz-nav: 18px;

  --adj-100: 50px;
  --adj-90: 45px;
  --adj-80: 40px;
  --adj-70: 35px;
  --adj-60: 30px;
  --adj-50: 25px;
  --adj-40: 20px;
  --adj-30: 15px;

  --TH-height: 50px;
  --MENU-size: var(--TH-height);
  --vis-padding: 15px;
  --sec-padding: var(--adj-80);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  text-align: left;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL CLASS ->            */
/* =====>=====>=====>=====>=====>=====>===== */

.inner {
  width: var(--SP-width);
  max-width: inherit;
}

/*===== #loading =====*/
#loading img {
  max-width: 72px;
  margin-bottom: 150px; /* 位置調整 */
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HEADING ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

h2, h3, h4, h5 {
  line-height: 1.3;
}
h4 {
  margin-bottom: var(--adj-50);
}
h5 {
  margin-bottom: 1em;
}

/*===== ORDERED =====*/
#sec01 h2,
#sec05 h4,
.mod h2,
.num h3 {
  text-align: center;
}
#sec05 h4 {
  margin-top: var(--adj-50);
  text-indent: 0;
}

/*===== .mod =====*/
.mod::after {
  height: 26px;
}

/*===== .mod2 =====*/
.mod2 {
  --height: 56px;
}

/*===== .mod3 =====*/
.mod3 {
--height: 46px;
  margin-top: var(--adj-60);
}
.mod3 + p {
  text-align: left;
}

/*===== ORDERED =====*/
#sec02 .mod,
#sec04 .mod {
  --width: 100%;
}
#sec02 .mod span {
  width: 60px;
  inset: -18px calc(50% + 193px) auto auto;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / TOP-HEADER ->               */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== #TH =====*/
#TH {
  --h1-width: 180px;
  filter: var(--filter);
}
#TH .inner {
  min-width: auto;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / SPhead ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#SPhead {
    display: grid;place-items: center;
  width: var(--MENU-size);height: var(--MENU-size);
  z-index: 1050;
  cursor: pointer;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HAM-MENU ->                 */
/* =====>=====>=====>=====>=====>=====>===== */

#HAM-MENU {
  --HAM-boxWidth: var(--HL-width);
  --HAM-boxHeight: calc(var(--HL-height) + var(--HL-3rd));
  --HL-width: 20px;
  --HL-height: 1px;
  --HL-margin: 7px;
  --HL-1st: 0px;
  --HL-2nd: calc(var(--HL-1st) + var(--HL-height) + var(--HL-margin));
  --HL-3rd: calc(var(--HL-2nd) + var(--HL-height) + var(--HL-margin));
}
#HAM-MENU {
  width: var(--HAM-boxWidth);height: var(--HAM-boxHeight);
  position: relative;
}
#HAM-MENU::before,
#HAM-MENU::after,
#HAM-MENU span {
  width: var(--HL-width);height: var(--HL-height);
  position: absolute;
  background: var(--std-clr);
  transition: .2s ease;
}
#HAM-MENU span {
  display: block;
  position: absolute;left: 0;
  transition-delay: .2s;
}
#HAM-MENU :nth-child(1) {top: var(--HL-1st);}
#HAM-MENU :nth-child(2) {top: var(--HL-2nd);}
#HAM-MENU :nth-child(3) {top: var(--HL-3rd);}

/*===== #HAM-MENU animation =====*/
#HAM-MENU::before,
#HAM-MENU::after {
  top: 8px;
  transform-origin: 50% 50%;
  content: '';
}
#HAM-MENU::before {
  left: 0;
  transform: rotate(45deg) scaleX(0);
}
#HAM-MENU::after {
  right: 0;
  transform: rotate(-45deg) scaleX(0);
}
.active #HAM-MENU::before,
.active #HAM-MENU::after {
  transition-delay: .2s;
}
.active #HAM-MENU::before {
  transform: rotate(45deg) scaleX(1);
}
.active #HAM-MENU::after {
  transform: rotate(-45deg) scaleX(1);
}
.active #HAM-MENU span {
  transform: scaleX(0);
  transition-delay: 0s;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GLOBAL-NAV ->               */
/* =====>=====>=====>=====>=====>=====>===== */

#SPhead.active + #GNav {
  display: block;
}
#GNav {
  width: 100%;height: 100vh;
  margin-top: var(--TH-height);
  padding-top: 2em;
  position: absolute;top: 0;left: 0;
  overflow-y: auto;
  background: rgba(255,255,255,.95);
}
#GNav ul {
    flex-direction: column;
    justify-content: center;align-items: center;
  min-height: 580px;
  padding-bottom: var(--TH-height);
  font-family: var(--serif);
  font-size: var(--fz-nav);
}
#GNav li {
  color: var(--clr-main);
}
#GNav li:not(:last-child) a {
  margin: max(8px,1.5vh) 0;
  padding: .3em 1.5em;
}
.sns a {
  margin: 12px 10px 0;
  border-radius: 50%;
}
.sns img {
  width: 50px;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / VISUAL ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#MV {
  --MV-height: 120vw;
  --pos: 25px;
}

/*===== #MV =====*/
#MV {
  height: clamp(450px,var(--MV-height),900px);
  min-height: auto;
  margin-bottom: 30px;
  padding: 0;
  overflow: inherit;
}
#MV + img,
.spLogo {
  display: block;
}
#MV + img {
  width: clamp(340px,90.667%,684px);
}
.spLogo {
  width: 250px;
  margin: auto;
  position: absolute;inset: auto 0 calc(var(--pos) + 35px) 0;
  z-index: 1;
}

/*===== .scroll =====*/
.scroll {
  width: clamp(50px,13.333vw,86px);
}

/*===== [class^="src"] =====*/
[class^="src"] {
  border-radius: 0;
  background-position-y: top;
}
.src1 {
  background-image: url(../img/mv/sp/sp-mv01.webp);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / ASIDE ->                    */
/* =====>=====>=====>=====>=====>=====>===== */

#sns {
  padding: var(--adj-80) 0;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / FOOTER ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

footer h1 {
  margin-bottom: var(--adj-40);
}
.bos {
  position: static;
}
.gallery {
  margin-top: var(--adj-30);
}
.gallery :first-child {
  display: none;
}
.gallery :nth-of-type(n) {
  width: 49%;
}
small {
  height: 80px;
  padding-bottom: 20px;
  font-size: var(--fz-S);
}

/*===== .Gmap =====*/
.Gmap iframe {
  display: none;
}
.Gmap {
--height: auto;
margin-bottom: var(--adj-100);
  background: var(--clr-base);
}

/*===== .ftrLink =====*/
.ftrLink {
  padding-top: 0;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / MOTION ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

/*===== .btnM =====*/
.btnM {
  --btn-width: 94%;
  --btn-height: 48px;
}
.btnM {
    display: flex;
  color: var(--clr-main);
  font-family: var(--serif);
  border: 1px solid var(--clr-main);
  background: var(--clr-base);
}
.btnM::before {
  display: block;
  width: 20px;height: 16px;
  font-size: 14px;
  background: url(../img/common/sp/m-map.svg) no-repeat;
  background-size: contain;
  content: '';
}

/*===== .btnS =====*/
.btnS {
  margin-top: var(--adj-80);
  font-size: var(--fz-nav);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HIDE ->                     */
/* =====>=====>=====>=====>=====>=====>===== */

.hideSP {
  display: none;
}
#TH .btnF,
.ctc,
[class^="mvcopy"] {
  display: none;
}


#top #sec01 p br,
#sec04 dd br,
.list2 + p br,
.mod3 + p br,
.num p br {
  display: none;
}





/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / index ->                    */
/* =====>=====>=====>=====>=====>=====>===== */

#sec01 figure,
.merits {
  margin-top: var(--adj-50);
}
#sec04 dd,
.num p,
.reco li:nth-of-type(n+2) {
  margin-top: .8em;
}
.area,
.mod3 + .cntBox div,
.vis {
  margin: auto;
}

/*===== [class^="list"] =====*/
[class^="list"] li:nth-of-type(n+2) {
  margin-top: .5em;
}

/*===== #sec01 =====*/
#sec01 .inner {
  display: block;
}
#sec01 figure,
.merits {
  display: flex;justify-content: space-between;
}
#sec01 figure img {
  width: 49%;
}
#sec01 figure img + img {
  margin: 0;
}

/*===== #sec02 =====*/
.lady {
  max-width: 320px;
  margin: auto;
  position: static;
}
.merits img {
  width: 23.5%;
}

.num {
  margin-bottom: var(--adj-60);
}

/*===== #sec03 =====*/
.reco {
  --width: 20px;
  --height: 24px;
}

/*===== #sec04 =====*/
#sec04 {
  background-position-x: 84%;
}
#sec04 dd,
.list2 + p {
  text-align: left;
}

/*===== #sec05 =====*/
#sec05 .mod2 + img {
  width: 80.266%;
}
.mod3 + .cntBox div h4,
.list2.fx li {
  flex-basis: 100%;
}
.mod3 + .cntBox div {
  display: flex;justify-content: space-between;align-items: flex-start;
  flex-wrap: wrap;
}
.mod3 + .cntBox div p {
  order: 1;
}
.mod3 + .cntBox div img {
  width: max(100px,35%);
  margin: 0;
}
.cntBox h4 + img {
  max-width: 571px;margin: auto;
}
.cntBox:nth-of-type(n+2) div {
    flex-basis: 100%;
  margin: var(--adj-50) 0 0 0;
}
.ca,
.cntBox em,
.list2.fx li,
.flow .list2 {
  font-size: var(--std-fz);
}
.list2.center {
  width: 100%;
}
.list2.fx {
  padding: 0;
}
.points {
  padding: 0 2%;
}
.points img {
  width: 47%;
}
.points img:nth-of-type(n+3) {
  margin-top: var(--adj-50);
}
.h4 {
  font-size: var(--fz-nav);
}
.shots,
.example img {
  max-width: 88%;
}
.example {
  display: block;
}
.example img{
  margin: auto;
}
.example img + img {
  margin-top: var(--margin);
}

/*===== #sec06 =====*/
#sec06 figure {
  display: block;
}
.area,
ol.list {
  max-width: 642px;
}
ol.list {
  margin: 0 auto var(--adj-50);
}
ol.list li:first-child {
  font-size: 24px;
}

/*===== #sec07 =====*/
.flow {
  padding-bottom: var(--adj-50);
}
.flow header {
  flex-basis: 100%;
  margin-top: var(--adj-40);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / inquiry ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

#inquiry {
  padding-bottom: 70px;
}
input[type="text"],
input[type="email"],
textarea {
  padding-right: .4em;
}

/*===== #ctcForm =====*/
#ctcForm {
  --form-width: 100%;
  --input-height: 40px;
}
#ctcForm dt,
#ctcForm dd {
  font-size: var(--fz-h5);
}
#ctcForm label span {
  font-size: 15px;
}
#ctcForm label span::before {
  --input-size: 20px;
}

/*===== .check =====*/
.check .mwform-checkbox-field.horizontal-item {
  margin-top: .8em;
}
.check label span::after {
--input-size: 14px;
  border-left-width: 3px;
}

/*===== .radio =====*/
.radio label span::after {
  --input-size: 12px;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / commerce ->                 */
/* =====>=====>=====>=====>=====>=====>===== */

.comm dd {
  font-size: var(--std-fz);
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / 404 ->                      */
/* =====>=====>=====>=====>=====>=====>===== */

#pnf section {
  min-height: 160px;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ADJUSTER QUERIES ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

@media not screen and (min-width:768px){

#sec02 .mod span {
  right: calc(50% + 105px);
}
.reco {
  display: block;
}

.mod h2 br, .msgBox h4 br {
  display: inherit;
}

}
@media not screen and (min-width:600px){

ol.list {
  margin-left: var(--adj-50);
}
.merits img {
  width: 47.875%;
}
.merits img:nth-of-type(n+3) {
  margin-top: var(--adj-30);
}
.mod::after {
  height: 18px;
}

}
@media not screen and (min-width:560px){

#policy p {
  text-align: left;
}
#sns a {
  width: 100%;
}
#sns a + a {
  margin-top: var(--adj-30);
}
.btnM {
  --btn-height: 40px;
}
.btnS {
  --btn-height: 50px;
}
.example {
  --margin: 40px;
}
.mod2 {
  --height: 40px;
}
.mod3 {
  --height: 34px;
}
.beShots br {
  display: inline;
}

}
@media not screen and (min-width:480px){

.example img {
  max-width: none;
}
.mod3 + .cntBox div p {
  width: 50%;
  margin-right: 10px;
}
.points {
  padding: 0;
}

}
@media not screen and (min-width:390px){

.check + dt + dd .error-msg {
  top: -67px;
}

}

}