@charset "UTF-8";
/*
Theme Name: tomo create. | こころはずむやさしい「デザインとイラスト」を。
Description: tomo create.のオリジナルテーマ
Version: 1.0
Author: tomo create.
*/

/* VARIABLE
======================================== */
:root {
  --primary-color: #596E8D;
  --secondary-color: #FFFBF4;
  --accent-color: #FF5E76;
  --base-color: #FFFBF4;
  --white: #FFF;
  --line: rgba(89, 110, 141, 0.4);
  --btn-line: rgba(89, 110, 141, 0.5);
  --hover-color: rgba(89, 110, 141, 0.8);
  --send-hover-color: rgba(89, 110, 141, 0.7);
  --en-font: "Slackside One", serif;
  --wa-font: "Zen Kurenaido", serif;
}

/* Google Fonts
======================================== */
.slackside-one-regular {
  font-family: "Slackside One", cursive;
  font-weight: 400;
  font-style: normal;
}

.zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* GENERAL STYLING
======================================== */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--base-color);
  font-family: var(--wa-font);
  color: var(--primary-color);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  overflow-y: hidden;
}

body::before,
body::after,
main::before,
main::after {
  content: "";
  margin: 0px;
  background-color: var(--primary-color);
  position: fixed;
  display: block;
  z-index: 20;
  pointer-events: none;
}
body::before {
  height: 2vh;
  right: 0;
  bottom: 0;
  left: 0;
}
body::after {
  width: 2vh;
  top: 0;
  bottom: 0;
  left: 0;
}
main::before {
  height: 2vh;
  left: 0;
  right: 0;
  top: 0;
}
main::after {
  width: 2vh;
  top: 0;
  right: 0;
  bottom: 0;
}

/* mobile layout ==========*/
@media (max-width: 1025px) and (min-height: 1366px) {
  body::before {
    height: 1vh;
  }
  body::after {
    width: 1vh;
  }
  main::before {
    height: 1vh;
  }
  main::after {
    width: 1vh;
  }
}
@media(max-width: 820px) and (min-height: 1024px) {
  body::before {
    height: 1vh;
  }
  body::after {
    width: 1vh;
  }
  main::before {
    height: 1vh;
  }
  main::after {
    width: 1vh;
  }
}
@media (max-width: 821px)  and (orientation: portrait) {
  body::before {
    height: 1vh;
  }
  body::after {
    width: 1vh;
  }
  main::before {
    height: 1vh;
  }
  main::after {
    width: 1vh;
  }
}
@media(max-width: 768px) and (min-height: 1024px) {
  body::before {
  height: 1vh;
  }
  body::after {
    width: 1vh;
  }
  main::before {
    height: 1vh;
  }
  main::after {
    width: 1vh;
  }
}
@media(max-width: 600px) {
  body::before {
  height: 1vh;
  }
  body::after {
    width: 1vh;
  }
  main::before {
    height: 1vh;
  }
  main::after {
    width: 1vh;
  }
}

/* 
LAYOUT
======================================== */
.wrapper {
  width: 100%;
  margin: 0 auto;
}

.inner {
  max-width: calc(100% + 20%);
  padding-left: 10%;
  padding-right: 10%;
  margin: 0 auto;
}

/* 
COMMON
======================================== */
.common-text p{
  font-size: .875rem;
  line-height: 2.7;
  letter-spacing: 1px;
  text-align: justify;
}

.common-text a {
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.common-btn {
  font-family: var(--en-font);
  border: solid 1px var(--btn-line);
  border-radius: 50px;
  transition: .4s;
}
.common-btn:hover:not(.works-list__item .thum-cate-list .common-btn,.home-btn .common-btn) {
  color: var(--white);
  background-color: var(--hover-color);
  transition: all .4s;  
}

.accent-color {
  color: var(--accent-color);
}

/* 
========================================
INDEX PAGE
======================================== */
/* 
HEADER
======================================== */
/* COPY画像仕様 */
#header {
  position: fixed;
  width: 100%;
  text-align: center;
  z-index: 15;
}

.main-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: fixed;
  left: calc(20px + 2vw);
  height: 100dvh;
  padding-top: 7dvh;
  padding-bottom: 3.5dvh;
  z-index: 99;
}
.main-copy h1 {
  height: calc(65vh - 5vh);
  aspect-ratio: 37 / 262;
}
#header .title-img {
  object-fit: contain;
}
#copy {
  height: 12dvh;
  aspect-ratio: 7/65;
  position: relative;
  bottom: 2rem;
}
#copy img {
  object-fit: contain;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .main-copy h1 {
    height: 65vh;
  }
}
/*
==================== ブレイク- 01/ 1025 */
@media(max-width: 1025px) {
  .main-copy {
    margin-left: 1.5vw;
  }
  #copy {
    height: 12dvh;
    bottom: 2.25rem;
  }
}
/*
==================== ブレイク- 02/ 600 */
@media(max-width: 600px) {
  .main-copy {
    margin-left: 0;
  }
  .main-copy h1 {
    height: 55vh;
    aspect-ratio: 37 / 262;
  }
  #copy {
    height: 12dvh;
    aspect-ratio: 7/65;
    position: relative;
    bottom: 2rem;
  }
}
/*
==================== ブレイク- 03/ 435 */
@media(max-width: 435px) {
  .main-copy h1 {
    height: 45vh;
  }
  #copy {
    height: 10dvh;
  }
}

/* 
Hamburger-MENU
======================================== */
#h-nav {
  position:fixed;
  z-index: -1;
  opacity: 0;
  top: 0;
  width:100%;
  height: 100vh;
  background: var(--base-color);
  background-image: url(./img/back-img.png);
  background-size: cover;
  background-position: 20% center;
  background-repeat: no-repeat;
  transition: all 0.5s;
  visibility: hidden;/*見えなくさせている*/
}

#h-nav.panelactive{
  visibility: visible;/*表示させている*/
	opacity: 1;
	z-index: 15;
}

#h-nav.panelactive .h-nav-list-box{
  position: fixed;
  z-index: 15; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#h-nav.panelactive .h-nav-list {
  display: block;
}

.h-nav-list-box {
  text-align: center;
  margin: 0 auto;
  padding-top: calc(8vh + 2vh);
}

.h-nav-list li {
  font-family: var(--en-font);
  color: var(--white);
  font-size: calc(2rem + .5vw);
  margin-bottom: 2.25rem;
}
.h-nav-list li a:hover {
  opacity: .8;
}
.h-nav-list-box .logo-box {
  margin-top: 4rem;
}
.h-nav-list-box .logo-box img {
  width: 12vw;
}
.h-nav-list-box .logo-box p {
  font-family: var(--en-font);
  font-size: 1.2vw;
  color: var(--white);
}

/* mobile layout ==========*/
/*
 ==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .h-nav-list li {
    font-family: var(--en-font);
    color: var(--white);
    font-size: 2vw;
    margin-bottom: 2.25rem;
  }
}
/*
==================== ブレイク- 01/ 1025 */
@media(max-width: 1025px) {
  .h-nav-list-box {
    padding-top: calc(15dvh)
  }
}
/*
==================== ブレイク- 02/ 600 */
@media(max-width: 600px) {
  .h-nav-list-box {
    padding-top: calc(16dvh);
  }

  .h-nav-list li {
    margin-bottom: 1.75rem;
  }

  .h-nav-list-box .logo-box {
    margin-top: 4rem;
  }
  .h-nav-list-box .logo-box img {
    width: 26vw;
  }
  .h-nav-list-box .logo-box p {
    font-size: 2vw;
  }
}

/*========= ボタンのためのCSS ===============*/
.openbtn {
  position:fixed;
  z-index: 99;
  top: 30px;
  right: 53px;
  cursor: pointer;
  width: 80px;
  height: 60px;
}

/*×に変化*/	
.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  height: 2px;
  background-color: var(--primary-color);
  width: 80%;
}

.openbtn span:nth-of-type(1) {
top: 22px;
right: 0;
width: 80px;
}

.openbtn span:nth-of-type(2) {
bottom: 23px;
right: 0;
width: 46px;
}

.openbtn.active span:nth-of-type(1) {
  top: 25px;
  left: 16px;
  transform: translateY(6px) rotate(-30deg);
  width: 80%;
  background-color: var(--white);
}

.openbtn.active span:nth-of-type(2){
  top: 37px;
  left: 16px;
  transform: translateY(-6px) rotate(30deg);
  width: 80%;
  background-color: var(--white);
}

/* mobile layout ==========*/
/*
 ==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .openbtn {
    top: 4vh;
    right: 3vw;
  }
}
/*
 ==================== ブレイク- 01/ 1025 */
@media(max-width: 1025px) {
  .openbtn {
    top: 4vh;
    right: 7vw;
  }
}
/*
 ==================== ブレイク- 02/ 600 */
@media(max-width: 600px) {
  .openbtn {
    top: 16px;
    right: calc(32px - .5rem);
    width: 80px;
    height: 60px;
  }

  .openbtn span {
    height: 2px;
    width: 60%;
  }
  
  .openbtn span:nth-of-type(1) {
    top: 22px;
    right: 0;
    width: 60px;
  }
  .openbtn span:nth-of-type(2) {
    bottom: 23px;
    right: 0;
    width: 26px;
  }
  .openbtn.active span:nth-of-type(1) {
    top: 19px;
    left: 26px;
    width: 60%;
  }
  .openbtn.active span:nth-of-type(2){
    top: 32px;
    left: 26px;
    width: 60%;
  }
}

/* 
main
======================================== */
main .logo-box_top {
  margin: 0 auto;
  text-align: center;
}

.logo-box_top {
  position: absolute;
  top: 30vh;
  right: 0;
  left: 0;
  margin: auto;
}
.logo-box_top .logo {
  width: 20vw;
  height: auto;
}
.logo-box_top p {
  font-family: var(--en-font);
  font-size: 1.6vw;
}

.scrolldown {
  position: absolute;
  top: 70vh;
  right: 0;
  left:0;
  height:50px;
  text-align: center;
}
.scrolldown span{
	position: absolute;
  right: 0;
	left: 0;
	top: -1.625rem;
	color: var(--primary-color);
  font-family: var(--en-font);
	font-size: 1.6vw;
  letter-spacing: 1px;
}
.scrolldown::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 30px;
	background: var(--primary-color);
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}
/* scrollアニメーション */
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .scrolldown {
    top: 75vh;
  }
  .scrolldown span{
    top: -1.625rem;
    font-size: 1.6vw;
  }
}
/*
==================== ブレイク- 01/ 1250 */
@media(max-width: 1250px) {
  .scrolldown {
    top: 70vh;
  }
  .scrolldown span{
    top: -1.625rem;
    font-size: calc(1.6vw + .2vw);
  }
}
/*
==================== ブレイク- 02/ 1205 */
@media(max-width: 1205px) {
  .logo-box_top {
    top: calc(30vh + 6vh);
  }
  .logo-box_top .logo {
    width: calc(20vw + 2vw);
  }
  .logo-box_top p {
    font-size: calc(1.6vw + .5vw);
  }
  .scrolldown {
    top: 75vh;
  }
  .scrolldown span{
    top: -1.625rem;
  }
}
/*
==================== ブレイク- 03/ 900 */
@media(max-width: 900px) {
  .scrolldown {
    top: 70vh;
  }
  .scrolldown span{
    top: -1.625rem;
    font-size: calc(1.6vw + .2vw);
  }
}
/*
==================== ブレイク- 04/ 600 */
@media(max-width: 600px) {
  .logo-box_top {
    top: calc(30vh + 8vh);
  }
  .logo-box_top .logo {
    width: calc(27vw + 4vw);
  }
  .logo-box_top p {
    font-size: calc(2.2vw + .75vw);
  }
  .scrolldown {
    top: 65vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: calc(2.2vw + .75vw);
  }
}
/*
==================== ブレイク- 05/ 420 */
@media(max-width: 420px) {
  .scrolldown {
    top: 60vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: calc(2.2vw + .75vw);
  }
}

/* 
luxyパララックス
======================================== */
#luxy {
  min-height: calc(668vh - 40vh); /* 7スクロール分確保 */
  height: auto;      /* 固定heightは削除 */
}

/* 色装飾 */
.cp-top-img {
  position: absolute;
  top: 0;
  left: 0;
  margin-inline: auto;
  width: 36vw;
}
.cp-top-img_right {
  position: absolute;
  top: 0;
  right: 0;
  width: 30vw;
}

/* イラスト装飾 */
.illust-container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  padding-bottom: 5rem;
}

/* 水彩（さかな） */
.p-img_sakana {
  position: absolute;
  top: 9.75rem;
  right: 24%;
  width: 16%;
}

/* イラスト（ハル） */
.p-img_illust01 {
  position: absolute;
  top: 100px;
  left: 13%;
  width: 17%;
}

/* イラスト（家族１） */
.p-img_illust02 {
  position: absolute;
  top: 306px;
  right: 3%;
  width: 55%;
  margin-top: calc(2rem + 2vh);
}

/* 水彩（紫） */
.p-img_purple {
  position: absolute;
  top: -9rem;
  left: 5%;
  width: 15%;
  z-index: 2;
}

/* 水彩（花） */
.p-img_flower {
  position: absolute;
  top: 0;
  right: 0;
  width: 14%;
  z-index: 3;
  margin-top: calc(100vh - 10vh);
}

/* イラスト（家族２） */
.p-img_illust03 {
  position: absolute;
  top: calc(30vh + 10vh);
  left: 3%;
  width: calc(45% + 2vw);
}

/* イラスト（ウェディング） */
.p-img_illust04 {
  position: absolute;
  top: calc(60vh - 20vh);
  right: 0;
  width: calc(40% + 2vw);
  margin-top: 20vh;
}

/* イラスト（ペンギン） */
.p-img_penguin {
  position: absolute;
  top: 80vh;
  left: 32%;
  width: 19%;
  z-index: 2; 
}

/* 水彩（黄色） */
.p-img_yellow {
  position: absolute;
  top: 30rem;
  left: 14%;
  width: 6%;
  margin-top: 5rem;
}

/* イラスト（バースデー） */
.p-img_illust05 {
  position: absolute;
  top: 39vh;
  left: 14%;
  width: 38%;
  margin-top: 60px;
}

/* イラスト（ペンギン２） */
.p-img_penguin-2 {
  position: absolute;
  top: 52vh;
  left: 1%;
  width: 22%;
  z-index: 2;
}

/* イラスト（わんこ） */
.p-img_illust06 {
  position: absolute;
  top: calc(110vh - 10vh);
  right: 17%;
  width: 24%;
}

/* 水彩（ピンク・イエロー） */
.p-img_pink-yellow {
  position: absolute;
  top: 160vh;
  right: 11%;
  width: 10%;
}

/* 水彩（ピンク・グリーン） */
.p-img_pink-green {
  position: absolute;
  top: 220vh;
  left: 12%;
  width: 20%;
}

/* イラスト（花束） */
.p-img_illust07 {
  position: absolute;
  top: 200vh;
  left: 21%;
  width: 29%;
}

/* 水彩（小花） */
.p-img_flower-2 {
  position: absolute;
  top: calc(230vh - 10vh);
  right: 26%;
  width: 20%;
  z-index: 2;
}

/* イラスト（手紙） */
.p-img_illust08 {
  position: absolute;
  top: calc(176vh - 10vh);
  right: 0;
  width: calc(34% + 2vw);
}

/* 水彩（パープル・スモール） */
.p-img_purple-small {
  position: absolute;
  top: calc(340vh - 10vh);
  left: 11%;
  width: 8%;
}

/* 水彩（紫２） */
.p-img_purple-2 {
  position: absolute;
  top: calc(160vh - 10vh);;
  left: 30%;
  width: 15%;
  z-index: 2;
}

/* 水彩（黄色２） */
.p-img_yellow-2 {
  position: absolute;
  top: calc(180vh - 10vh);
  left: 20%;
  width: 6%;
  margin-top: 5rem;
}

/* イラスト（赤ちゃん） */
.p-img_illust09 {
  position: absolute;
  top: calc(208vh - 10vh);
  right: 15%;
  width: 28%;
}

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

.margin__top {
  margin-top: calc(10rem - 15vh);
}

.media-test::after {
  content: "基準";
  display: block;
  font-size: 2rem;
  color: var(--accent-color);
  padding: 2rem;
}

/* mobile layout ====================*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  #luxy {
    min-height: calc(710vh - 40vh);
  }

  .p-img_illust03 {
    top: calc(45vh + 2vh);
  }
  .p-img_illust04 {
    top: calc(94vh - 20vh);
  }
  .p-img_flower {
    margin-top: calc(110vh + 10vh);
  }
  .p-img_penguin {
    top: calc(84vh + 2vh);
  }
  .p-img_yellow {
    top: calc(30rem + 2vh);
  }
  .p-img_illust05 {
    top: calc(46vh + 2vh);
  }
  .p-img_penguin-2 {
    top: calc(62vh + 2vh);
  }
  .p-img_illust06 {
    top: calc(130vh + 10vh);
  }
  .p-img_pink-green {
    top: calc(230vh + 10vh);
  }
  .p-img_illust07 {
    top: calc(210vh + 10vh);
  }
  .p-img_flower-2 {
    top: calc(279vh + 10vh);
  }
  .p-img_illust08 {
    top: calc(200vh + 10vh);
  }
  .p-img_purple-small {
    top: calc(350vh + 10vh);
  }
  .p-img_purple-2 {
    top: calc(170vh + 10vh);
  }
  .p-img_yellow-2 {
    top: calc(180vh + 10vh);
  }
  .p-img_illust09 {
    top: calc(210vh + 10vh);
  }

  .media-test::after {
    content: "1439px";
  }
}
/*
==================== ブレイク- 01/ 1081 対策 */
@media(max-width: 1081px) and (orientation: landscape) {
  .logo-box_top {
    top: calc(24vh + 6vh);
  }

  .scrolldown {
    top: 65vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.25rem;
  }

  .media-test::after {
    content: "max/1081px and orientation: landscape";
    display: block;
    font-size: 2rem;
    color: var(--accent-color);
    padding: 2rem;
  }
}
/*
==================== ブレイク- 02/ 1025 */
@media(max-width: 1025px) {
  .margin__top {
    margin-top: calc(5rem - 5vh);
  }
  .p-img_illust01 {
    top: calc(100px + 2vh);
    left: calc(13% + 4.2vw);
    width: calc(17% + 40px);
  }
  .p-img_illust02 {
    top: calc(306px + 15vh);
    right: 3%;
    width: calc(61% + 50px);
  }
  .p-img_sakana {
    top: calc(9.75rem + 6vh);
    right: calc(24% - 6vw);
    width: calc(16% + 60px);
  }
  .p-img_illust03 {
    top: calc(45vh + 2vh);
    left: 3%;
    width: calc(45% + 7vw);
  }
  .p-img_purple {
    top: calc(-15rem - 8vh);
    left: 5%;
    width: calc(15% + 10px);
  }
  .p-img_flower {
    width: calc(14% + 2vw);
    margin-top: calc(40vh - 10vh);
  }
  .p-img_illust04 {
    top: calc(28vh - 26vh);
    width: calc(40% + 6vw);
    margin-top: calc(40vh + 50vh);
 }
  .p-img_penguin {
    width: calc(19% + 2vw);
  }
  .p-img_flower-2 {
    top: calc(230vh - 10vh);
    width: calc(20% + 4vw);
  }
  .p-img_illust08 {
    top: calc(168vh - 10vh);
    width: calc(34% + 4vw);
  }
  .p-img_purple-small {
    top: calc(340vh - 10vh);
    width: calc(8% + 4vw);
  }
  .p-img_purple-2 {
    top: calc(160vh - 10vh);;
    width: calc(15% + 4vw);
  }
  .p-img_yellow-2 {
    top: calc(180vh - 10vh);
    width: calc(6% + 4vw);
  }
  .p-img_illust09 {
    top: calc(208vh - 10vh);
    width: calc(28% + 4vw);
  }

  .media-test::after {
    content: "1025px";
  }
}
/*
==================== ブレイク- 03/ 1024 × 600 対策 */
@media(max-width: 1025px) and (min-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  .main-copy {
    margin-left: 0;
  }
  #luxy {
    min-height: calc(718vh - 40vh);
  }

  .scrolldown {
    top: 76vh;
  }
  .p-img_illust03 {
    top: calc(70vh + 20vh);
    left: 3%;
    width: calc(45% + 7vw);
  }
  .p-img_illust04 {
    margin-top: 106vh;
  }
  .p-img_purple {
    top: calc(-2rem - 8vh);
  }
  .p-img_flower {
    margin-top: calc(141vh - 10vh);
  }
  .p-img_penguin {
    top: 128vh;
  }
  .p-img_yellow {
    top: 40rem;
  }
  .p-img_illust05 {
    top: 104vh;
  }
  .p-img_illust06 {
    top: calc(169vh - 10vh);
  }
  .p-img_pink-yellow {
    top: 192vh;
  }
  .p-img_flower-2 {
    top: calc(276vh - 10vh);
  }
  .p-img_pink-green {
    top: 289vh;
  }
  .p-img_illust07 {
    top: 262vh;
  }
  .p-img_penguin-2 {
    top: 108vh;
  }
  .p-img_illust08 {
    top: calc(231vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(207vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(392vh - 10vh);
  }
  .p-img_yellow-2 {
    top: calc(229vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(236vh - 10vh);
  }

  .media-test::after {
    content: "max:1025px / min:600px and (orientation: landscape: pointer/coarse)";
  }
}
/*
==================== ブレイク- 04/ 1024 × 1366 対策 */
@media (max-width: 1025px) and (min-height: 1366px) {
  .scrolldown {
    top: 56vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.25rem;
  }
  .h-nav-list li {
    font-size: calc(3rem + .5vw);
  }
  .main-copy {
    margin-left: 0.7vw;
  }
  #luxy {
    min-height: calc(352vh - 20vh);
  }
  .main-copy h1 {
    height: 44vh;
  }
  #copy {
    height: 10dvh;
  }

  .p-img_illust01 {
    top: calc(100px + 2vh);
    left: calc(13% + 4.2vw);
    width: calc(21% + 40px);
  }
  .p-img_illust02 {
    top: calc(30vh + 15vh);
    right: 1%;
    width: calc(63% + 50px);
  }
  .p-img_illust03 {
    top: calc(1vh + .5vh);
    margin-top: 0;
  }
  .p-img_illust04 {
    top: calc(18vh - 6vh);
    margin-top: 0;
  }
  .p-img_flower {
    margin-top: calc(28vh - 10vh);
  }
  .p-img_penguin {
    top: calc(18vh + 2vh);
    width: calc(19% + 2vw);
  }
  .p-img_yellow {
    top: calc(10vh + 2vh);
  }
  .p-img_illust05 {
    top: calc(-47vh - 2vh);
  }
  .p-img_penguin-2 {
    top: calc(-40vh + 2vh);
  }
  .p-img_illust06 {
    top: calc(2vh - 10vh);
  }
  .p-img_pink-yellow {
    top: calc(16vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(20vh + 10vh);
  }
  .p-img_illust07 {
    top: calc(28vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(32rem - 10vh);
  }
  .p-img_flower-2 {
    top: calc(52vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(90vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(10vh - 10vh);;
  }
  .p-img_yellow-2 {
    top: calc(8vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(41vh - 10vh);
  }

  .media-test::after {
    content: "max:1025px / min:1366px";
  }
}
/*
==================== ブレイク- 05/ 821 */
@media (max-width: 821px) {
  #luxy {
    min-height: calc(570vh - 40vh);
  }

  .p-img_illust03 {
    top: calc(14vh - 15vh);
    left: 3%;
    width: calc(45% + 7vw);
    margin-top: 40vh;
  }
  .p-img_illust04 {
    margin-top: calc(32vh - 10vh);
    top: calc(28vh - 26vh);
    padding-top: 34vh;
  }
  .p-img_penguin {
    top: 69vh;
  }
  .p-img_illust05 {
    top: 22vh;
  }
  .p-img_yellow {
    top: 24rem;
  }
  .p-img_penguin-2 {
    top: 27vh;
  }
  .p-img_illust06 {
    top: calc(81vh - 10vh);
  }
  .p-img_pink-yellow {
    top: 93vh;
  }
  .p-img_pink-green {
    top: 151vh;
  }
  .p-img_illust07 {
    top: 139vh;
  }
  .p-img_illust08 {
    top: calc(127vh - 10vh);
  }
  .p-img_flower-2 {
    top: calc(168vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(100vh - 10vh);
  }
  .p-img_yellow-2 {
    top: calc(122vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(254vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(144vh - 10vh);
  }

  .media-test::after {
    content: "821px";
  }
}
/*
==================== ブレイク- 06/ 821 and (orientation: portrait) */
@media (max-width: 821px) and (orientation: portrait) and (pointer: coarse) {
  .main-copy {
    margin-left: 0.4vw;
  }
  .main-copy h1 {
    height: calc(55vh - 5vh);
  }
  #copy {
    height: 9dvh;
  }

  #luxy {
    min-height: calc(457vh - 40vh);
  }

  .scrolldown {
    top: 56vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.25rem;
  }
  
  .p-img_illust03 {
    top: calc(-5vh - 15vh);
    left: 3%;
    width: calc(45% + 7vw);
    margin-top: 40vh;
  }
  .p-img_illust04 {
    margin-top: calc(32vh - 10vh);
    top: calc(28vh - 26vh);
    padding-top: 10vh;
  }
  .p-img_flower {
    margin-top: calc(57vh - 10vh);
  }
  .p-img_penguin {
    top: 40vh;
  }
  .p-img_yellow {
    top: 30vh;
  }
  .p-img_illust05 {
    top: -19vh;
    width: calc(38% + 2vw);
  }
  .p-img_penguin-2 {
    top: -12vh;
  }
  .p-img_illust06 {
    top: calc(31vh - 10vh);
    width: calc(26% + 4vw);
  }
  .p-img_pink-yellow {
    top: 42vh;
  }
  .p-img_pink-green {
    top: 87vh;
  }
  .p-img_illust08 {
    top: calc(67vh - 10vh);
  }
  .p-img_flower-2 {
    top: calc(99vh - 10vh);
    width: calc(29% + 2vw);
  }
  .p-img_illust07 {
    top: 84vh;
  }
  .p-img_purple-2 {
    top: calc(55vh - 10vh);
  }
  .p-img_yellow-2 {
    top: calc(49vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(153vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(81vh - 10vh);
    width: calc(34% + 4vw);
  }

  .media-test::after {
    content: "max:821px / portrait";
  }
}
/*
==================== ブレイク- 07/ 853 × 1280 対策 */
@media(max-width: 854px) and (min-height: 1280px) {
  #luxy {
    min-height: calc(330vh - 20vh);
  }
  .scrolldown {
    top: 88vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.125rem;
  }

  .main-copy h1 {
    height: 48vh;
  }
  #copy {
    height: 10dvh;
    bottom: 2.25rem;
  }

  .p-img_illust01 {
    top: calc(100px + 2vh);
    left: calc(16% + 4.2vw);
    width: calc(19% + 40px);
  }
  .p-img_sakana {
    top: calc(13.75rem + 6vh);
    right: calc(24% - 6vw);
    width: calc(20% + 60px);
  }
  .p-img_illust02 {
    top: calc(28vh + 15vh);
  }
  .p-img_illust03 {
    top: calc(1vh - 10vh);
    margin-top: 0;
  }
  .p-img_illust04 {
    margin-top: 0;
    padding-top: 0;
  }
  .p-img_flower {
    margin-top: calc(20vh - 10vh);
  }
  .p-img_penguin {
    top: calc(10vh + 2vh);
  }
  .p-img_illust05 {
    top: calc(-58vh - 2vh);
  }
  .p-img_penguin-2 {
    top: calc(-48vh + 2vh);
  }
  .p-img_yellow {
    top: calc(10rem - 2vh);
  }
  .p-img_illust06 {
    top: calc(-18vh - 10vh);
    width: calc(24% + 4vw);
  }
  .p-img_pink-yellow {
    top: calc(-8vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(19vh + 8vh);
  }
  .p-img_illust07 {
    top: calc(24vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(10rem - 10vh);
  }
  .p-img_flower-2 {
    top: calc(38vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(2vh - 10vh);
  }
  .p-img_yellow-2 {
  top: calc(3vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(70vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(18vh - 10vh);
  }

  .media-test::after {
    content: "max:854px / min:1280px";
  }
}
/*
==================== ブレイク- 08/ 820 × 1180/ 768 × 1024 対策 */
@media(max-width: 820px) and (min-height: 1024px) and (orientation: portrait) {
  #luxy {
    min-height: calc(377dvh - 20dvh);
  }

  .scrolldown {
    top: 60vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.125rem;
  }

  .main-copy h1 {
    height: 48vh;
  }
  #copy {
    height: 10dvh;
  }
  .p-img_illust02 {
    top: calc(34vh + 15vh);
  }
  .p-img_illust03 {
    margin-top: 10vh;
    top: calc(13vh - 15vh);
  }
  .p-img_illust04 {
    padding-top: 0;
  }
  .p-img_flower {
    margin-top: calc(40vh - 10vh);
  }
  .p-img_penguin {
    top: calc(22vh + 2vh);
  }
  .p-img_illust05 {
    top: calc(-42vh - 2vh);
  }
  .p-img_penguin-2 {
    top: calc(-38vh + 2vh);
  }
  .p-img_yellow {
    top: calc(16rem - 2vh);
  }
  .p-img_illust06 {
    top: calc(4vh - 10vh);
    width: calc(24% + 4vw);
  }
  .p-img_pink-yellow {
    top: calc(20vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(36vh + 10vh);
  }
  .p-img_illust07 {
    top: calc(38vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(30rem - 10vh);
  }
  .p-img_flower-2 {
    top: calc(61vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(90vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(12vh - 10vh);;
  }
  .p-img_yellow-2 {
    top: calc(20vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(50vh - 10vh);
  }

  .media-test::after {
    content: "max:820px / min:1024px and (orientation: portrait)";
  }
}
/*
==================== ブレイク- 09/ 820 × 1180/ 768 × 1024 対策 */
@media(max-width: 1180px) and (min-height: 820px) and (orientation: landscape) {
  #luxy {
    min-height: calc(614dvh - 20dvh);
  }

  .media-test::after {
    content: "max:1180px / min:820px and (orientation: landscape)";
  }
}

/*
==================== ブレイク- 10/ 720 PC用 */
@media(max-width: 721px) and (min-height: 540px) {
  #luxy {
    min-height: calc(519vh - 40vh);
  }

  .scrolldown {
    top: 60vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.125rem;
  }

  .media-test::after {
    content: "max:721px / PC用";
  }
}
/*
==================== ブレイク- 11/ 720 × 540 ヨコ対策 */
@media(max-width: 721px) and (max-height: 540px) and (orientation: landscape) {
  .h-nav-list li {
    font-size: calc(1.25rem + .5vw);
  }
    #luxy {
    min-height: calc(581vh - 20vh);
  }

  .p-img_illust01 {
    top: calc(52px + 2vh);
    left: calc(10% + 4.2vw);
  }
  .p-img_illust02 {
    top: calc(242px + 15vh);
  }
  .p-img_purple {
    top: calc(-8rem - 8vh);
  }
  .p-img_illust03 {
    top: calc(49vh - 15vh);
    left: 3%;
    width: calc(45% + 7vw);
    margin-top: 40vh;
  }
  .p-img_illust04 {
    margin-top: calc(66vh - 10vh);
    top: calc(28vh - 26vh);
    padding-top: 34vh;
  }
  .p-img_flower {
    width: calc(14% + 2vw);
    margin-top: calc(123vh - 10vh);
  }
  .p-img_illust06 {
    top: calc(112vh - 10vh);
  }
  .p-img_penguin {
    top: 99vh;
  }
  .p-img_illust05 {
    top: 56vh;
  }
  .p-img_penguin-2 {
    top: 63vh;
  }
  .p-img_illust07 {
    top: 177vh;
  }
  .p-img_pink-green {
    top: 209vh;
  }
  .p-img_purple-small {
    top: calc(291vh - 10vh);
  }
  .p-img_yellow-2 {
    top: calc(146vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(136vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(164vh - 10vh);
  }
  .p-img_flower-2 {
    top: calc(180vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(166vh - 10vh);
  }

  .media-test::after {
    content: "max:721p x max:540 and (orientation: landscape)";
  }
}
/*
==================== ブレイク- 12/ 540 × 720 タテ対策 */
@media(max-width: 540px) and (min-height: 720px) and (orientation: portrait) {
  #luxy {
    min-height: calc(420vh - 20vh);
  }

  .scrolldown {
    top: 65vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1rem;
  }

  .p-img_illust03 {
    top: calc(40vh - 10vh);
    margin-top: 10vh;
  }
  .p-img_illust04 {
    top: 8vh;
    margin-top: calc(50vh - 5vh);
    padding-top: 0;
  }
  .p-img_penguin {
    top: calc(60vh + 2vh);
  }
  .p-img_illust05 {
    top: calc(22vh - 2vh);
  }
  .p-img_penguin-2 {
    top: calc(30vh + 2vh);
  }
  .p-img_illust06 {
    top: calc(70vh - 10vh);
    width: calc(24% + 4vw);
  }
  .p-img_pink-yellow {
    top: calc(86vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(120vh + 8vh);
  }
  .p-img_illust07 {
    top: calc(120vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(49rem - 10vh);
  }
  .p-img_flower-2 {
    top: calc(132vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(90vh - 10vh);
  }
  .p-img_yellow-2 {
  top: calc(80vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(190vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(118vh - 10vh);
  }

  .media-test::after {
    content: "max:540px / min:720px and (orientation: portrait)";
  }
}
/*
==================== ブレイク- 13/ 600 */
@media(max-width: 600px) {
  #luxy {
    min-height: calc(420vh - 40vh);
  }
  .margin__top {
    margin-top: -10rem;
  }

  .cp-top-img {
    width: calc(36vw + 10%);
  }
  .cp-top-img_right {
    width: calc(30vw + 14%);
  }

  .p-img_illust01 {
    top: calc(100px + 1vh);
    left: calc(13% + 4.2vw);
    width: calc(17% + 40px);
  }
  .p-img_illust02 {
    top: calc(306px + 12vh);
    right: 3%;
    width: calc(62% + 50px);
  }
  .p-img_sakana {
    top: calc(9.75rem + 3vh);
    right: calc(24% - 8vw);
    width: calc(16% + 40px);
  }
  .p-img_purple {
    top: calc(-15rem + 10vh);
    left: 5%;
    width: calc(15% + 10px);
  }
  .p-img_flower {
    margin-top: calc(74vh - 10vh);
  }

  .media-test::after {
    content: "600px";
  }
}
/*　崩れ発生ポイント！
==================== ブレイク- 14/ 600 × 720 以下対策 */
@media(max-width: 600px) and (max-height: 719px) {
  #luxy {
    min-height: calc(448vh - 40vh);
  }

  .scrolldown {
    top: 65vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.125rem;
  }

  .p-img_illust03 {
    top: calc(19vh - 15vh);
    left: 3%;
    width: calc(45% + 7vw);
    margin-top: 40vh;
  }
  .p-img_illust04 {
    margin-top: calc(68vh - 10vh);
    top: calc(28vh - 26vh);
    padding-top: 10vh;
  }
  .p-img_flower {
    margin-top: calc(99vh - 10vh);
  }
  .p-img_penguin {
    top: 67vh;
  }
  .p-img_yellow {
    top: 57vh;
  }
  .p-img_illust05 {
    top: 26vh;
  }
  .p-img_penguin-2 {
    top: 33vh;
  }
  .p-img_illust06 {
    top: calc(76vh - 10vh);
  }
  .p-img_pink-green {
    top: 122vh;
  }
  .p-img_illust07 {
    top: 108vh;
  }
  .p-img_purple-small {
    top: calc(181vh - 10vh);
  }
  .p-img_yellow-2 {
    top: calc(102vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(86vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(116vh - 10vh);
  }
  .p-img_flower-2 {
    top: calc(142vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(121vh - 10vh);
  }

  .media-test::after {
    content: "max:600px / min:719px";
  }
}
/*
==================== ブレイク- 15/ 430 */
@media(max-width: 435px) and (orientation: portrait) and (pointer: coarse) {
  .scrolldown {
    top: 90vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1rem;
  }

  .main-copy h1 {
    height: 40vh;
  }
  #copy {
    height: 10dvh;
  }

  #luxy {
    min-height: calc(330vh - 20vh);
  }
  .margin__top {
    margin-top: calc(2rem - 5vh);
  }

  .p-img_illust01 {
    top: calc(100px + 1vh);
    left: calc(19% + 4.2vw);
    width: calc(20% + 40px);
  }
  .p-img_illust02 {
    top: calc(306px + 4vh);
    margin-top: 14vh;
  }
  .p-img_sakana {
    top: calc(9.75rem + 3vh);
    right: calc(20% - 8vw);
    width: calc(24% + 40px);
  }
  .p-img_illust03 {
    top: calc(-3vh - 20vh);
    width: calc(50% + 7vw);
    margin-top: 24vh;
  }
  .p-img_illust04 {
    margin-top: calc(1vh - 10vh);
    margin-top: 4vh;
    width: calc(50% + 2vw);
    padding-top: 4vh;
  }
  .p-img_flower {
    margin-top: calc(20vh - 10vh);
  }
  .p-img_penguin {
    top: calc(16vh + 2vh);
    width: calc(19% + 4vw);
  }
  .p-img_illust05 {
    top: calc(-52vh - 2vh);
    width: calc(40% + 6vw);
  }
  .p-img_penguin-2 {
    top: calc(-46vh + 2vh);
    width: calc(22% + 4vw);
  }
  .p-img_yellow {
    top: calc(10rem - 2vh);
  }
  .p-img_illust06 {
    top: calc(-5vh - 20vh);
    width: calc(28% + 4vw);
  }
  .p-img_pink-yellow {
    top: calc(-2vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(16vh + 8vh);
  }
  .p-img_illust07 {
    top: calc(28vh - 10vh);
    width: calc(29% + 8vw);
  }
  .p-img_illust08 {
    top: calc(6rem - 10vh);
    width: calc(37% + 4vw);
  }
  .p-img_flower-2 {
    top: calc(31vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(80vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(12vh - 10vh);;
  }
  .p-img_yellow-2 {
    top: calc(8vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(30vh - 10vh);
    width: calc(38% + 8vw);
  }

  .media-test::after {
    content: "435px and (orientation: portrait/pointer: coarse)";
  }
}
/*
==================== ブレイク- 16/ 376 */
@media(max-width: 376px) {
  #luxy {
    min-height: calc(316vh - 20vh);
  }

  .scrolldown {
    top: 59vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: .875rem;
  }

  .p-img_illust01 {
    top: calc(61px + 1vh);
    left: calc(14% + 4.2vw);
    width: calc(20% + 40px);
  }
  .p-img_illust03 {
    top: calc(28vh - 5vh);
    margin-top: 10vh;
  }
  .p-img_purple {
    top: calc(-11rem + 10vh);
  }
  .p-img_illust04 {
    margin-top: calc(48vh - 5vh);
    padding-top: 0;
  }
  .p-img_flower {
    margin-top: calc(63vh - 10vh);
  }
  .p-img_penguin {
    top: calc(41vh + 2vh);
  }
  .p-img_illust05 {
    top: calc(-7vh - 2vh);
  }
  .p-img_penguin-2 {
    top: calc(-1vh + 2vh);
  }
  .p-img_illust06 {
    top: calc(29vh - 10vh);
    right: 12%;
  }
  .p-img_pink-yellow {
    top: calc(20vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(53vh + 8vh);
  }
  .p-img_illust07 {
    top: calc(65vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(19rem - 10vh);
    padding-top: 4vh;
  }
  .p-img_flower-2 {
    top: calc(63vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(52vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(55vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(107vh - 10vh);
  }
  .p-img_yellow {
    top: 26vh;
  }
  .p-img_yellow-2 {
    top: calc(39vh - 10vh);
  }

  .media-test::after {
    content: "376px";
  }
}
/*
==================== ブレイク- 17/ 376 */
@media(max-width: 376px) and (orientation: portrait) and (pointer: coarse) {
  #luxy {
    min-height: calc(360vh - 20vh);
  }

  .scrolldown {
    top: 59vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: .875rem;
  }

  .p-img_illust01 {
    top: calc(61px + 1vh);
    left: calc(14% + 4.2vw);
    width: calc(20% + 40px);
  }
  .p-img_illust03 {
    top: calc(10vh - 5vh);
    margin-top: 10vh;
  }
  .p-img_illust04 {
    margin-top: calc(30vh - 5vh);
    padding-top: 0;
  }
  .p-img_flower {
    margin-top: calc(50vh - 10vh);
  }
  .p-img_penguin {
    top: calc(26vh + 2vh);
  }
  .p-img_illust05 {
    top: calc(-38vh - 2vh);
  }
  .p-img_penguin-2 {
    top: calc(-36vh + 2vh);
  }
  .p-img_illust06 {
    top: calc(8vh - 10vh);
    right: 12%;
  }
  .p-img_pink-yellow {
    top: calc(20vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(29vh + 8vh);
  }
  .p-img_illust07 {
    top: calc(38vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(14rem - 10vh);
    padding-top: 4vh;
  }
  .p-img_flower-2 {
    top: calc(40vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(18vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(41vh - 10vh);
  }

  .media-test::after {
    content: "376px orientation: portrait/pointer: coarse";
  }
}
/*
==================== ブレイク- 18/344 × 882 対策 */
@media(max-width: 344px) and (max-height: 885px) and (orientation: portrait) and (pointer: coarse) {
  .main-copy h1 {
    height: 33vh;
  }
  #copy {
    height: 8dvh;
    bottom: 1.25rem;
  }
  #luxy {
    min-height: calc(310vh - 20vh);
  }

  .scrolldown {
    top: 83vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1rem;
  }

  .p-img_illust01 {
    left: calc(18% + 4.2vw);
  }
  .p-img_sakana {
    top: calc(14.75rem + 3vh);
  }
  .p-img_illust03 {
    top: calc(-10vh - 12vh);
  }
  .p-img_illust04 {
    margin-top: calc(3vh - 5vh);
  }
  .p-img_flower {
    margin-top: calc(20vh - 10vh);
  }
  .p-img_penguin {
    top: calc(16vh + 2vh);
  }
  .p-img_illust05 {
    top: calc(-52vh - 2vh);
  }
  .p-img_penguin-2 {
    top: calc(-46vh + 2vh);
  }
  .p-img_illust06 {
    top: calc(-16vh - 10vh);
  }
  .p-img_pink-yellow {
    top: calc(-10vh - 10vh);
  }
  .p-img_pink-green {
    top: calc(14vh + 8vh);
  }
  .p-img_illust07 {
    top: calc(20vh - 10vh);
  }
  .p-img_illust08 {
    top: calc(4rem - 10vh);
  }
  .p-img_flower-2 {
    top: calc(12vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(2vh - 10vh);
  }
  .p-img_yellow-2 {
  top: calc(3vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(70vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(18vh - 10vh);
  }

  .media-test::after {
    content: "max:344px / min:885px and (orientation: portrait)";
  }
}
/*
==================== ブレイク- 19/720 × 1114 対策 */
@media(max-width: 720px) and (min-height: 1114px) and (orientation: portrait) {
  #luxy {
      min-height: calc(365vh - 20vh);
  }
  .media-test::after {
    content: "max:720px / min:1114px and (orientation: portrait)";
  }
}
/*
==================== ブレイク- 20/ Mobaile ヨコ対策 */
@media(max-width: 1025px) and (max-height: 500px) and (orientation: landscape) {
  .main-copy {
    margin-left: 0;
  }
  .h-nav-list li {
    font-size: calc(1.25rem + .5vw);
    margin-bottom: 1rem;
  }
  .h-nav-list-box .logo-box {
    margin-top: 2rem;
  }

  #luxy {
    min-height: calc(891vh - 40vh);
  }

  .logo-box_top {
    top: calc(24vh + 6vh);
  }
  .scrolldown {
    top: 85vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1rem;
  }

  .p-img_purple {
    top: calc(-3rem - 8vh);
  }
  .p-img_illust01 {
    top: calc(51px + 2vh);
    left: calc(9% + 4.2vw);
    width: calc(17% + 40px);
  }
  .p-img_sakana {
    top: calc(5.75rem + 6vh);
    right: calc(24% - 6vw);
    width: calc(16% + 60px);
  }
  .p-img_illust02 {
    top: calc(258px + 15vh);
  }
  .p-img_illust03 {
    top: calc(134vh + 2vh);
  }
  .p-img_illust04 {
    top: calc(108vh - 26vh);
  }
  .p-img_flower {
    margin-top: calc(207vh - 10vh);
  }
  .p-img_penguin {
    top: 168vh;
  }
  .p-img_illust05 {
    top: 156vh;
  }
  .p-img_penguin-2 {
    top: 161vh;
  }
  .p-img_yellow {
    top: 38rem;
  }
  .p-img_illust07 {
    top: 309vh;
  }
  .p-img_pink-green {
    top: 386vh;
  }
  .p-img_yellow-2 {
    top: calc(261vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(471vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(271vh - 10vh);
  }
  .p-img_illust06 {
    top: calc(253vh - 10vh);
  }
  .p-img_pink-yellow {
    top: 301vh;
  }
  .p-img_illust08 {
    top: calc(329vh - 10vh);
  }
  .p-img_flower-2 {
    top: calc(390vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(333vh - 10vh);
  }

  .media-test::after {
    content: "max:1025px / max:500px and (orientation: landscape)";
  }
}
/*
==================== ブレイク- 21/ iPadPro/SurfacePro7 ヨコ対策 */
@media(max-width: 1181px) and (min-height: 820px) and (orientation: landscape) and (pointer: coarse) {
  .logo-box_top {
    top: calc(25vh + 6vh);
  }
  .scrolldown {
    top: 66vh;
  }
}
/*
==================== ブレイク- 22/ iPadPro/SurfacePro7 ヨコ対策 */
@media(max-width: 1370px) and (min-height: 911px) and (orientation: landscape) and (pointer: coarse) {
  .main-copy {
    margin-left: 0;
  }
  #h-nav.panelactive .h-nav-list-box {
    margin-top: 0;
  }

  #luxy {
    min-height: calc(494vh - 40vh);
  }

  .scrolldown {
    top: 61vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1.25rem;
  }

  .p-img_illust01 {
    position: absolute;
    top: 111px;
    left: 16%;
    width: 19%;
  }
  .p-img_purple {
    top: -14rem;
  }
  .p-img_illust03 {
    top: calc(-5vh + 10vh);
  }
  .p-img_illust04 {
    top: calc(29vh - 20vh);
  }
  .p-img_flower {
    top: -51vh;
  }
  .p-img_penguin {
    top: 32vh;
  }
  .p-img_illust05 {
    top: -19vh;
  }
  .p-img_yellow {
    top: 18rem;
  }
  .p-img_penguin-2 {
    top: -7vh;
  }
  .p-img_illust06 {
    top: calc(47vh - 10vh);
  }
  .p-img_pink-yellow {
    top: 63vh;
  }
  .p-img_pink-green {
    top: 95vh;
  }
  .p-img_illust07 {
    top: 82vh;
  }
  .p-img_illust08 {
    top: calc(107vh - 10vh);
  }
  .p-img_flower-2 {
    top: calc(138vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(116vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(83vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(181vh - 10vh);
  }
  .p-img_yellow-2 {
    top: calc(80vh - 10vh);
  }

  .media-test::after {
    content: "max:1370px / max:1025px and (orientation: landscape) and (pointer: coarse)";
  }
}
/*
==================== ブレイク- 23/ Mobaile SE/GalaxyS8 ヨコ対策 */
@media(max-width: 721px) and (max-height: 500px) and (orientation: landscape) {
  .main-copy {
    margin-left: 0;
    left: 29px;
  }
  #h-nav.panelactive .h-nav-list-box {
    margin-top: 0;
  }
  .h-nav-list li {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .h-nav-list-box .logo-box {
    margin-top: 1.5rem;
  }

  #luxy {
    min-height: calc(799vh - 40vh);
  }

  .scrolldown {
    top: 85vh;
  }
  .scrolldown span{
    top: -1.25rem;
    font-size: 1rem;
  }

  .p-img_illust01 {
    top: calc(68px + 2vh);
    left: calc(9% + 4.2vw);
  }
  .p-img_purple {
    top: calc(1rem - 8vh);
  }
  .p-img_illust03 {
    top: calc(75vh + 2vh);
  }
  .p-img_illust04 {
    top: calc(81vh - 26vh);
  }
  .p-img_flower {
    margin-top: calc(181vh - 10vh);
  }
  .p-img_penguin {
    top: 140vh;
  }
  .p-img_illust05 {
    top: 106vh;
  }
  .p-img_yellow {
    top: 26rem;
  }
  .p-img_penguin-2 {
    top: 113vh;
  }
  .p-img_illust06 {
    top: calc(205vh - 10vh);
  }
  .p-img_pink-yellow {
    top: 238vh;
  }
  .p-img_pink-green {
    top: 307vh;
  }
  .p-img_illust07 {
    top: 263vh;
  }
  .p-img_illust08 {
    top: calc(274vh - 10vh);
  }
  .p-img_flower-2 {
    top: calc(325vh - 10vh);
  }
  .p-img_illust09 {
    top: calc(277vh - 10vh);
  }
  .p-img_purple-2 {
    top: calc(227vh - 10vh);
  }
  .p-img_purple-small {
    top: calc(410vh - 10vh);
  }
  .p-img_yellow-2 {
    top: calc(218vh - 10vh);
  }

  .media-test::after {
    content: "max:721px / max:500px and (orientation: landscape)";
  }
}

/* 
footer
======================================== */
#op-footer {
  background-image: url(./img/cp-bottom.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  position: absolute;  /* fixedにしない */
  z-index: 15;
  width: 100%;
  pointer-events: auto;
  bottom: 0;
  padding-top: 10rem;
}
#op-footer {
  opacity: 0;
}

.f-text-container__right {
  display: flex;
  justify-content: end;
  align-items: center;
}

.f-text {
  font-size: .875rem;
  line-height: 1.7;
  margin-right: 177px;
  padding-bottom: 2rem;
}
.f-illust {
  width: 10%;
}
.f-illust img {
  width: 100%;
}

.f-line {
  width: 100%;
  border: solid 1px var(--line);
  position: relative;
}
.f-line::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -157px;
  right: 0;
  background-image: url(./img/f-img_illust.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: 170px;
  height: 250px;
}

.arrow__page-top {
  width: 56px;
  height: 56px;
  position: absolute;
  top: -28px;
  right: 0;
  left: 0;
  margin: auto;
}

.f-nav-container__left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 2rem;
  padding-bottom: 3rem;
}

.f-nav-list {
  display: flex;
  justify-content: start;
}

.f-nav-list li a {
  display: block;
  padding: 30px 56px 30px 0;
  font-family: var(--en-font);
  font-size: 1.5rem;
  
}
.f-nav-list li a:hover {
  color: var(--hover-color);
  transition: all 0.5s;
}

/* mobile layout ==========*/
/* 
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .f-nav-list li a {
    font-size: 1.7vw;
  }
  .f-text {
    font-size: clamp(.8vw, .875rem, .875rem + 1vw);
  }
  .f-nav-list li a {
    padding: 2vw 3vw 2vw 0;
  }
  .f-line::before {
    top: calc(-130px - 3vh);
    right: -7vw;
    width: 17vw;
    height: 15vw;
  }
}
/*
==================== ブレイク- 01/ 900 */
@media(max-width: 900px) {
  .f-nav-list li a {
    padding: 30px 36px 20px 0;
    font-size: calc(1.5rem - .5vw);
  }
  .f-text {
    font-size: .8125rem;
  }
}
/* ==================== ブレイク- 02/ 720-PC */
@media(max-width: 720px) {
  #op-footer {
    background-image: url(./img/cp-bottom-2.webp);
    padding-top: calc(4rem - 2vh);
  }
  .f-text-container__right {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .f-text {
    font-size: .75rem;
    margin-right: 18vw;
  }
  .f-nav-list {
    display: flex;
    justify-content: start;
    margin-top: 2vh;
  }
  .f-nav-list li a {
    padding: 10px 16px 10px 0;
    font-size: calc(1.5rem - 1vw);
    text-align: center;
  }
  .f-line::before {
    top: -15vh;
    right: 0;
    width: calc(150px - 2vw);
    height: 150px;
  }
  .f-nav-container__left {
    justify-content: start;
    align-items: center;
    margin-left: 0;
    padding-bottom: 2rem;
  }
}
/* ==================== ブレイク- 03/ 720-T&M */
@media(max-width: 720px) and (pointer: coarse) {
  .f-line::before {
    top: -22vh;
  }
}
/* ==================== ブレイク- 04/ 660 */
@media(max-width: 600px) {
  .sp_br_remove {
    display: none;
  }
  .f-text {
    margin-right: 25vw;
    text-align: justify;
  }
}
/* ==================== ブレイク- 05/ 560 */
@media(max-width: 560px) {
  .f-line::before {
    top: -14vh;
    right: 0;
    width: calc(120px - 2vw);
    height: 120px;
  }

  .f-nav-list li a {
    padding: 8px 10px 8px 0;
    font-size: .9375rem;
  }
}
/* ==================== ブレイク- 06/ 473 */
@media(max-width: 473px) {
  .f-nav-list {
    display: none;
  }
  .f-line::before {
    top: -13vh;
    width: calc(120px - 7vw);
    height: 120px;
  }
  .f-line {
    top: -1vh;
  }
  .f-text {
    font-size: calc(.75rem - .4vw);
    padding-bottom: 1.25rem;
    padding-left: .5rem;
  }
  .arrow__page-top {
    width: 40px;
    height: 40px;
    top: -22px;
  }
}
/* ==================== ブレイク- 07/ 427 */
@media(max-width: 427px) {
  .f-text {
    padding-bottom: 1.75rem;
  }
}
/* ==================== ブレイク- 08/ 376 */
@media (max-width: 376px) {
  .f-line::before {
    top: -14vh;
    width: calc(120px - 10vw);
    height: 120px;
  }
}
/* ==================== ブレイク- 09/ 720 × 1114 対策 */
@media(max-width: 720px) and (min-height: 1114px) and (orientation: portrait) {
  .f-line::before {
    top: -13vh;
    right: 0;
    width: calc(200px - 6vw);
    height: 200px;
  }
}

/* イラスト アニメーション用
======================================== */
/* Animation */
.a-wrapper {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
.target {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
.target-second {
  animation: floating-x 7.2s ease-in-out forwards;
}
.target-third {
  animation: floating-y 1.8s ease-in-out forwards;
}
@keyframes floating-x {
  0% {
    transform: translateX(-2%);
  }
  100% {
    transform: translateX(2%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(5%);
  }
}

/* jQuery用
ふわっと表示（fadeUpTrigger） 
======================================== */
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUpTrigger {
  opacity: 0;
}

/* じわっと表示（blurTrigger）
======================================== */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime {
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger {
  opacity: 0;
}

/* じわっと表示（scroll-anim）
======================================== */
.op-blur {
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.8s ease, filter 0.8s ease;
}

.op-visible {
  opacity: 1;
  filter: blur(0);
}

.scroll-anim {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition: opacity 1s ease, transform 1s ease, filter 1s ease;
}

.scroll-anim.s-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ふわっと画面遷移用（pagefade-wrap）
======================================== */
.pagefade-wrap {
	animation: fadein 2s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

/* 
========================================
ABOUT PAGE
======================================== */
/* 下層ページ色装飾 */
#main__others {
  background-image: url(./img/cp-top.webp);
  background-repeat: no-repeat;
  background-size: 36vw;
  background-position: left top;
  min-height: 100dvh;
}

/* 下層ページinner */
.inner__others {
  margin-top: 6rem;
  margin-left: 3%;
  /* margin-right: -5%; */
}

/* 下層ページロゴ */
.logo-box__others {
  margin: 0 auto;
  text-align: center;
  padding-top: 10vh;
}

.logo-box__others .logo {
  width: 18vw;
  height: auto;
}
.logo-box__others p {
  font-family: var(--en-font);
  font-size: 1.4vw;
}

h2 {
  font-size: 3rem;
  font-family: var(--en-font);
  line-height: 0;
}

/* 画像とテキストコンテナ */
.about-container {
  display: flex;
  align-items: stretch;
}
.flex__reverse {
  flex-direction: row-reverse;
}
.flex__reverse .about-img {
  flex: 2;
}
.about-img {
  flex: 2;
}
.about-text {
  flex: 2;
  padding-right: 1rem;
  padding-left: 3rem;
}
.about-img .profile-img {
  width: 100%;
  height: 100%;
  padding-bottom: 3rem;
}
.profile-img-mb {
  display: none;
}
.about-img img {
  width: 100%;
  height: 95%;
  object-fit: cover;
  border-radius: 2px;
}
.about-text p {
  margin-bottom: 2.5rem;
  text-align: justify;
}
.text-margin {
  margin-top: 1.5rem;
}

/* 反転　画像とテキストコンテナ */
.flex__reverse .about-img {
  margin-left: 2.5rem;
  align-items: start;
}
.flex__reverse .about-text {
  padding-left: 1rem;
}

h4 {
  font-size: 1.625rem;
  margin-bottom: 2rem;
}
h4 span {
  font-size: 2rem;
  font-family: var(--en-font);
  margin-right: 1rem;
}
h4.title-text {
  font-size: 1.5rem;
  line-height: 1.7;
  text-align: justify;
}

.deco-text {
  display: inline-block;
  font-size: 1rem;
  font-family: var(--en-font);
  margin-bottom: .5rem;
}

.margin__top-about {
  margin-top: 4rem;
}

.about-img .profile-img-illust {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-margin {
  padding-top: 3rem;
  margin-bottom: 2.5rem;
}

.about__position {
  position: relative;
}

/* 絵本を読むイラスト用 */
.about__position .profile-img-illust {
  position: absolute;
  top: calc(-6rem - 3vh);
  left: -7vw;
  object-fit: contain;
  width: calc(140% + 1.5vw);
  height: calc(140% + 1.5vh);
}

/* Likes Toolsタイトル */
.mini-titile-container {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  margin-top: 3.5rem;
}
.mini-title-inner {
  flex: 2;
  padding-right: 4rem;
}
.mini-title-inner:last-child {
  padding-right: 0;
}

.mini-title-inner:nth-child(2) {
  margin-left: 3rem;
}
.mini-titile {
  font-family: var(--en-font);
  font-size: 2rem;
}
.mini-list {
  margin-top: 1.5rem;
}
.mini-list li {
  font-size: .875rem;
  margin-bottom: 1.75rem;
  margin-left: 1rem;
  text-align: justify;
}

/* Likes-list */
.likes-list {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  margin-top: 1.5rem;
  margin-left: 1rem;
}

.likes-list dt {
  font-weight: normal;
  font-size: .875rem;
  margin-bottom: 1.5rem;
  letter-spacing: .2em;
  line-height: 1.5;
  text-align: justify;
  text-align-last: justify;
}

.likes-list dd {
  margin: 0;
  font-size: .875rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.others__footer {
  background-image: url(./img/cp-bottom.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  width: 100%;
  pointer-events: auto;
  padding-top: 10rem;
  /* 重なりリンクが効かない対処 */
  pointer-events: none;
}
/* 重なりリンクが効かない対処 */
.others__footer a {
  pointer-events: auto;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .inner__others {
    margin-top: 11vh;
  }
  h2 {
    font-size: 3.5vw;
  }
  /* 絵本を読むイラスト用 */
  .about__position .profile-img-illust {
    top: -8rem;
    left: -9vw;
    width: calc(149% + 2vw);
    height: calc(149% + 2vh);
  }
  .common-text p {
    font-size: 1vw;
    line-height: 2.7;
    letter-spacing: 1px;
  }
  h4 span {
    font-size: 2vw;
    margin-right: 1rem;
  }
  h4 {
    font-size: 1.9vw;
    margin-bottom: 2rem;
  }
  h4.title-text {
    font-size: 1.8vw;
  }
  .about-text {
    padding-left: 3vw;
  }
  .flex__reverse .about-img {
    margin-left: 2vw;
  }
  .mini-titile {
    font-size: 2vw;
  }
  .likes-list {
    grid-template-columns: 16% 1fr;
  }
  .likes-list dt,
  .likes-list dd {
    font-size: 1vw;
  }
  .mini-list li {
    font-size: 1vw;
  }
}
/* ==================== ブレイク- 01/ 900 */
@media(max-width: 900px) {
  /* 下層ページロゴ */
  .inner__others {
    margin-top: 4rem;
    margin-left: calc(3% + 3vw);
  }
  .logo-box__others {
    padding-top: calc(8vh - 2vh);
  }

  .logo-box__others .logo {
    width: 18vw;
    height: auto;
  }
  .logo-box__others p {
    font-family: var(--en-font);
    font-size: calc(1.4vw + .2vw);
  }

  h2 {
    font-size: calc(3rem - 4px);
    margin-left: 1vw;
  }

  .about-container {
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
  }
  .about-img .profile-img {
    display: none;
  }
  .profile-img-mb {
    height: 90%;
    display: block;
    padding: 2rem 3rem 0;
  }
  .about-text {
    padding-right: 1rem;
    padding-left: 1.5rem;
  }
  .flex__reverse .about-img {
    margin-left: 0;
  }
  .flex__reverse .about-text {
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
  }
  .common-text p {
    font-size: .875rem;
  }
  .about-img .profile-img-illust {
    position: absolute;
    width: calc(64vw + 4vw);
    height: calc(45vw - -7vh);
    top: calc(-64vh + 6vh);
    left: -37vw;
  }
  .mini-titile-container {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    margin-top: 1rem;
    flex-direction: column;
  }
  .mini-title-inner {
    padding-right: 1rem;
    padding-left: 1rem;
    margin-bottom: 3rem;
  }
  .mini-title-inner:nth-child(2) {
    margin-left: 0;
  }
  .mini-titile {
    font-size: 1.625rem;
  }
  .mini-list {
    margin-top: 1rem;
    padding-right: 1rem;
  }
  h4.title-text {
    font-size: 1.5rem;
    line-height: 1.7;
    margin-top: 1.75rem;
  }
  .title-margin {
    padding-top: calc(12rem - -16vh);
    margin-bottom: 0;
  }

  .img-box {
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* ==================== ブレイク- 02/ 720 */
@media(max-width: 720px) {
  .inner {
    max-width: calc(720px + 20%);
    padding-right: 6%;
  }
  .inner__others {
    margin-top: 3rem;
    /* margin-left: 2%; */
    margin-left: calc(3% + 3vw);
  }
  .others__footer {
    background-image: url(./img/cp-bottom-2.webp);
    padding-top: calc(4rem - 2vh);
  }
  .about-img .profile-img-illust {
    width: calc(76vw + 4vw);
    height: calc(56vw - -7vh);
    top: calc(-64vh + 10vh);
    left: -45vw;
  }
}
/* ==================== ブレイク- 03/ 500 */
@media(max-width: 500px) {
  .inner {
    max-width: calc(500px + 20%);
    padding-right: 6%;
    padding-left: 12%;
  }
  .inner__others {
    margin-top: 3rem;
    margin-left: calc(3% + 4vw);
    padding-right: 4%;
  }
  .logo-box__others {
    padding-top: calc(8vh - 1vh);
  }
  .logo-box__others .logo {
    width: calc(18vw + 2vw);
  }
  .logo-box__others p {
    font-size: calc(1.4vw + 1vw);
  }
  h2 {
    font-size: 2rem;
    margin-left: 3.5vw;
  }
  h4 {
    font-size: 1.375rem;
    margin-bottom: 1.25rem;
  }
  h4 span {
    font-size: calc(2rem - 6px);
    margin-right: .5rem;
  }
  h4.title-text {
    font-size: 1.125rem;
    margin-top: 1.5rem;
  }
  .common-text p {
    font-size: .8125rem;
    line-height: 2.4;
    letter-spacing: 0;
  }
 
  .about-img img {
    padding: 0vh 2vw 0 3vw;
    margin-bottom: -1vh;
  }
   .about-img img.profile-img-mb {
    padding: 5vh 2vw 0 3vw;
    margin-bottom: -1vh;
  }
  .margin__top-about {
    margin-top: 2rem;
  }
  .about-text p {
    margin-bottom: 2rem;
    letter-spacing: 0px;
  }
  .mini-list {
    padding-right: 0;
  }
  .mini-list li {
    font-size: .8125rem;
    margin-bottom: 1.25rem;
    line-height: 1.25;
  }
  .title-margin {
    padding-top: calc(12rem - 3vh);
    margin-bottom: 0;
  }
  .about-img .profile-img-illust {
    position: absolute;
    width: calc(64vw + 4vw);
    height: calc(45vw - -7vh);
    top: calc(-39vh + 6vh);
  }
  .flex__reverse .about-text {
    margin-right: 0;
    padding-left: 1.5rem;
    padding-right: 1rem;
    margin-top: 1.75rem;
  }
  .mini-title-inner {
    padding-right: 1rem;
  }
  .likes-list {
    margin-top: 1rem;
  }
  .likes-list dt,
  .likes-list dd {
    font-size: .8125rem;
    line-height: 1.25;
    margin-bottom: 1.125rem;
  }
}
/* ==================== ブレイク- 04/ 469 */
@media(max-width: 469px) {
  .logo-box__others {
    padding-top: calc(6vh - 1vh);
  }
  .logo-box__others .logo {
    width: calc(23vw + 2vw);
  }
  .logo-box__others p {
    font-size: 2vw;
  }
  h4 span {
    font-size: 1.375rem;
  }
  h4 {
    font-size: 1.25rem;
    margin-bottom: .75em;
  }
  .about-img .profile-img-illust {
    width: calc(81vw + 4vw);
    height: calc(50vw - -7vh);
    top: calc(-39vh + 6vh);
    left: -49vw;
  }
  .likes-list {
    grid-template-columns: 3.9rem 1fr;
    margin-left: .5rem;
  }

  .mini-title-inner:last-child {
    padding-right: 1rem;
  }
  .mini-list li {
    margin-left: .5rem;
  }
}
/* ==================== Mobile全般用 */
@media (pointer: coarse) {
  .common-text p {
    font-size: .8125rem;
    line-height: 2.4;
  }
  .likes-list {
    margin-top: 1rem;
  }
  .likes-list dt,
  .likes-list dd {
    font-size: .8125rem;
    line-height: 1.25;
    margin-bottom: 1.125rem;
    text-align: justify;
  }
}
@media (pointer: coarse) and (orientation: landscape) {
  .inner__others {
    margin-top: 4rem;
  }
}
@media(max-width: 1369px) and (pointer: coarse) and (orientation: landscape) {
  .inner {
    padding-right: 6%;
  }
  .common-text p {
    font-size: .875rem;
    line-height: 2.4;
  }
  .likes-list {
    margin-top: 1rem;
  }
  .likes-list dt,
  .likes-list dd {
    font-size: .875rem;
    line-height: 1.25;
    margin-bottom: 1.25rem;
  }
  .mini-list {
    margin-top: 1rem;
  }
}
@media(max-width: 1025px) and (pointer: coarse)  {
  .inner__others {
    margin-top: 4rem;
  }
  .logo-box__others {
    padding-top: 6vh;
  }
  .inner {
    max-width: calc(100% + 20%);
    padding-left: 13%;
    padding-right: 6%;
  }
  .about__position .profile-img-illust {
    top: calc(-4rem - 3vh);
    left: -8vw;
    width: calc(127% + 1.5vw);
    height: calc(127% + 1.5vh);
  }
}
@media(max-width: 854px) and (pointer: coarse)  {
  .about__position .profile-img-illust {
    top: calc(-23rem - 3vh);
    left: -38vw;
    width: 67vw;
    height: 48vw;
  }
}
@media(max-width: 821px) and (pointer: coarse)  {
  .about-img .profile-img-illust {
    width: calc(64vw + 4vw);
    height: calc(45vw - -7vh);
    top: calc(-45vh + 6vh);
    left: -37vw;
  }
}
@media(max-width: 431px) and (pointer: coarse)  {
  .about-img .profile-img-illust {
    width: calc(78vw + 4vw);
    height: calc(51vw - -7vh);
    top: calc(-34vh + 6vh);
    left: -46vw;
  }
}
@media(max-width: 376px) and (pointer: coarse)  {
  .about-img .profile-img-illust {
    width: calc(78vw + 4vw);
    height: calc(51vw - -7vh);
    top: calc(-39vh + 6vh);
    left: -46vw;
  }
}
@media(max-width: 345px) and (pointer: coarse)  {
  .about-img .profile-img-illust {
    top: calc(-31vh + 6vh);
  }
}
@media(max-width: 897px) and (max-height: 500px) and (pointer: coarse)  {
  .about__position .profile-img-illust {
    top: calc(-24rem - 3vh);
    left: -38vw;
    width: 67vw;
    height: 48vw;
  }
}
@media(max-width: 741px) and (max-height: 500px) and (pointer: coarse)  {
  .about__position .profile-img-illust {
    top: calc(-20rem - 3vh);
    left: -38vw;
    width: 67vw;
    height: 48vw;
  }
}

/* 
========================================
WORKS PAGE
======================================== */
.works-cate-container {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  max-width: 100%;
}
.works-cate-container h2 {
  margin-right: 1.875rem;
  line-height: 0;
}

/* カテゴリーリスト */
.works-cate-list {
  display: flex;
  flex-wrap: wrap;
}
.works-cate-list li {
  margin-right: .5rem;
  margin-bottom: 1.125rem;
}
/* カテゴリーボタン　common-btnはCOMMONにあります↑ */
.works-cate-list li .common-btn {
  font-family: var(--en-font);
  font-size: 1.125rem;
  line-height: 1.4;
  padding: 0 1rem 8px;
}

/* 作品一覧 */
.works-list__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 3.5rem;
  gap: 0 14px;
  margin-right: -10px;
}

.works-list__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: calc(6rem - 3vh);
  width: calc(33.333% - 10px);
}

.works-item__link {
  transition: .4s;
  width: 100%;
}
.works-item__link:hover {
  opacity: .8;
  transition: .4s;
}

/* 作品タイトル */
.works-list__item h3 {
  font-size: calc(1.25rem - 1px);
  letter-spacing: 2px;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

/* 作品画像 */
.thumbnail {
  width: auto;
  height: auto;
  max-width: 100%;
  box-shadow: 0px 0px 8px rgba(246, 239, 226, .8);
}
.thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 176/169;
  object-fit: cover;
  border-radius: 2px;
}

/* サムネイル内カテゴリーリスト */
.thum-cate-list {
  display: flex;
  flex-wrap: wrap;
}
.thum-cate-list li {
  margin-right: .25rem;
  margin-bottom: .125rem;
}
/* サムネイル内カテゴリーボタン common-btnはCOMMONにあります↑ */
.thum-cate-list .common-btn {
  padding: 1px 8px 5px;
  font-size: .8125rem;
  display: inline-block;
}

/* ページネーション */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding-bottom: 2rem; */
}
.wp-pagenavi a,
.wp-pagenavi .current {
  font-family: var(--en-font);
  font-size: 1.25rem;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: var(--base-color);
  border: solid 1px var(--btn-line);
  border-radius: 50px;
  color: var(--primary-color);
  transition: .4s;
  text-align: center;
  line-height: 1.8;
  margin: 0 8px;
}
.wp-pagenavi a:hover {
  background-color: var(--hover-color);
  color: var(--white);
  transition: .4s;
}
.wp-pagenavi .current {
  background-color: var(--primary-color);
  color: var(--white);
}
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink {
  width: auto;
  border-radius: 50%;
  border: none;
  background: var(--base-color);
  color: var(--primary-color);
  font-size: 2rem;
  line-height: 1;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .works-cate-list li {
    margin-right: .4vw;
    margin-bottom: 2vh;
  }
  .works-cate-list li .common-btn {
    font-size: 1.5vw;
    padding: 0 1vw .8vh;
  }
  .works-list__items {
    margin-top: 6vh;
  }
  .works-list__item {
    margin-bottom: 9vh;
  }
  .works-list__item h3 {
    font-size: 1.5vw;
    padding-top: 1.7vh;
    padding-bottom: 1.7vh;
  }
  .thum-cate-list .common-btn {
    padding: .2vh .5vw .6vh;
    font-size: .9vw;
  }
}
/* ==================== ブレイク- 01/ 900 */
@media(max-width: 900px) {
  .inner {
    padding-right: 8%;
  }
  .inner__others {
    margin-top: 4rem;
    margin-left: calc(3% + 3vw);
  }
  .works-cate-container {
    flex-direction: column;
  }
  .works-cate-container h2 {
    font-size: calc(3rem - 4px);
    margin-left: 1vw;

    margin-right: 1.875rem;
    line-height: 0;
    margin-bottom: 2.5rem;
  }
  .works-cate-list li .common-btn {
    font-family: var(--en-font);
    font-size: 1rem;
    line-height: 1.4;
    padding: 0 1rem 8px;
  }
  .works-list__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 1.5rem;
    gap: 0 12px;
    margin-right: -10px;
  }
  .works-list__item {
    width: calc(50% - 10px);
  }
  .thumbnail {
    width: auto;
    height: auto;
    max-width: 100%;
  }
  .works-list__item h3 {
    font-size: 1.125rem;
  }
}
/* ==================== ブレイク- 02/ 720 */
@media(max-width: 720px) {
  .inner {
    padding-right: 6%;
  }
  .works-cate-container h2 {
    font-size: 2.5rem;
    margin-left: 3.5vw;
  }
  .works-cate-list li .common-btn {
    font-size: .9375rem;
    padding: 0 .5rem 6px;
  }
  .works-cate-list li {
    margin-right: .5rem;
  }
  .works-list__items {
    margin-top: 1.5rem;
    gap: 0 12px;
    margin-right: 0px;
    padding-left: 1rem;
  }
  .works-list__item {
    margin-bottom: 3rem;
  }
  .thum-cate-list .common-btn {
    padding: 1px 6px 4px;
    font-size: .75rem;
  }
  .thum-cate-list li {
    margin-right: .25rem;
  }
  .works-list__item h3 {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .wp-pagenavi a, .wp-pagenavi .current {
    font-size: 1rem;
    width: 30px;
    height: 30px;
    line-height: 1.6;
  }
  .wp-pagenavi a.nextpostslink, 
  .wp-pagenavi a.previouspostslink {
    font-size: 2rem;
    line-height: .6;
  }
}
/* ==================== ブレイク- 03/ 500 */
@media (max-width: 500px) {
  .works-cate-container h2 {
    font-size: 2rem;
    margin-left: 3.5vw;
  }
  .works-list__item {
    width: calc(100% - 10px);
  }
}
/* ==================== ブレイク- 04/ 469 */
@media (max-width: 469px) {
  .inner__others {
    margin-left: 7%;
  }
  .works-cate-container {
    padding-left: .5rem;
  }
  .works-cate-container h2 {
    margin-bottom: 2rem;
  }
  .works-cate-list li .common-btn {
    font-size: .875rem;
    padding: 0 .5rem 4px;
  }
  .works-cate-list li {
    margin-right: .5rem;
    margin-bottom: .875rem;
  }
  .thum-cate-list .common-btn {
    padding: 1px 6px 4px;
    font-size: .75rem;
  }
  .works-list__items {
    margin-top: 1.5rem;
    gap: 0 12px;
    margin-right: 0px;
    padding-left: 1.5rem;
  }
}

/* 
========================================
WORKS-SINGLE PAGE
======================================== */
/* 個別ページの大見出し画像 */
.w-single-img {
  width: 100%;
  height: auto;
  margin-top: 4rem;
}
.w-single-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 240/91;
  object-fit: cover;
}

/* サムネイル用アイキャッチ */
.eyecatch {
  display: none;
}

/* 画像と説明テキスト */
.w-single-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-items: stretch;
  text-align: justify;
}
.w-single-margin{
  padding-top: 2rem;
}
.w-single-desc-area h3 {
  font-size: calc(2rem - 2px);
  letter-spacing: 2px;
  padding-top: 2.215rem;
}
.w-single__photo {
  margin-right: 5rem;
  max-width: 545px;
  flex: 2;
}
.w-single__photo img {
  margin-bottom: 3rem;
  border-radius: 2px;
  object-fit: contain;
}
.w-single-desc-area {
  display: flex;
  flex-direction: column;
  align-self: flex-start; /* 高さを維持 */
  height: fit-content;
  flex: 2;
}
.w-single-text {
  margin-top: 3.625rem;
}
.w-single-text p {
  margin-bottom: 2.5rem;
}
/* SITE-URL */
.site-url-wrap {
  font-size: .9375rem;
  margin-top: 1rem;
}
.site-url-wrap a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.site-url-wrap::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 11px;
  background-image: url(./img/blank-img.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: baseline;    
}

/* TOOL */
.tool-wrap {
  margin-top: 2rem;
}
.tool-wrap p {
  font-family: var(--en-font);
  font-size: 1.5rem;
}
.tool-list li {
  font-size: .875rem;
  margin-top: 1rem;
  margin-left: .25rem;
}
.tool-list li::before {
  content: '';
  width: 2px;
  height: 2px;
  border-radius: 50px;
  display: inline-block;
  background-color: var(--primary-color);
  position: relative;
  top: -3px;
  margin-right: .5rem;
}

/* INFO */
.info-wrap {
  border: 1px solid var(--line);
  padding: 1.25rem;
  margin-top: 2.5rem;
}
.info-wrap p {
  font-size: .8125rem;
  line-height: 2;
}

/* 戻る・一覧に戻る・次へボタン */
.page-list-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 3.5rem;
}

/* 戻る・次へ */
.circle-btn a,
.circle-btn-reverse a {
	width: 80px;
  height: 80px;
	display:block;
	border: solid 1px var(--primary-color);
	border-radius:50px;
	text-align:center;
	background-color: var(--base-color);
	transition:all .4s;
	position:relative;
}
.circle-btn a::before,
.circle-btn-reverse a::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  margin: auto;
  background-image: url(./img/arrow-mini.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.circle-btn a::before {
  transform: rotate(180deg);
  top: 20px;
  left: 0;
  right: 15px;
}
.circle-btn-reverse a::before {
  top: 20px;
  left: 20px;
  right: 15px;
}
.circle-btn img {
  width: 50%;
}

/* 一覧に戻るボタン */
.back-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}
.back-img img {
  width: 15vw;
}
.back-img p {
  position: relative;
  margin-top: -.5rem;
  margin-left: -1rem;
}
.back-img p::after {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url(./img/arrow-back.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -3px;
  margin-left: 8px;
}

/* Related Works */
.related-title {
  text-align: center;
  margin-top: 8rem;
}
.related-title p {
  font-family: var(--en-font);
  font-size: calc(3rem - 4px);
}

.w-single .works-list__item {
  margin-bottom: 0;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .w-single-img {
    margin-top: 11vh;
  }
  .w-single-desc-area h3 {
    font-size: 2vw;
  }
  .tool-wrap p {
    font-family: var(--en-font);
    font-size: 2vw;
  }
  .tool-list li {
    font-size: 1vw;
  }
  .back-img p {
    font-size: 1.1vw;
  }
  .circle-btn a, .circle-btn-reverse a {
    width: calc(80px + .2vw);
    height: calc(80px + .2vh);
  }
  .site-url-wrap {
    font-size: 1vw;
  }
  .info-wrap p {
    font-size: .9vw;
  }
  .related-title p {
    font-size: 3vw;
  }
}
/* ==================== ブレイク- 01/ 1250 */
@media(max-width: 1250px) {
  .wrapper-single .inner__others {
    margin-top: 3rem;
  }
  .w-single__photo {
    margin-right: 3rem;
  }
  .w-single-text {
    margin-top: 2.5rem;
  }
  .wrapper-single .works-list__items {
    margin-top: 2rem;
  }
}
/* ==================== ブレイク- 02/ 900 */
@media(max-width: 900px) {
  .w-single-container {
    flex-direction: column-reverse;
    /* padding-left: 1rem; */
  }
  .w-single-img {
    margin-top: 3rem;
  }
  .w-single__photo {
    margin-right: 0;
    max-width: 100%;
    margin-top: 3rem;
  }
  .w-single-desc-area h3 {
    font-size: 2rem;
    /* line-height: 2.4; */
    letter-spacing: 2px;
    padding-top: 1.5rem;
  }
  .w-single-margin {
    padding-top: 0;
  }
  .w-single-text {
    margin-top: 2.5rem;
  }
  .w-single-text p {
    margin-bottom: 2rem;
  }
  .wrapper-single .works-list__items {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 2rem;
    gap: 0 14px;
    margin-right: -10px;
  }
  .back-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }
  .wrapper-single .works-list__item {
    width: calc(50% - 10px);
  }
  .wrapper-single .works-list__item:nth-child(3) {
    display: none;
  }
  .tool-list li {
    font-size: .875rem;
  }
  .site-url-wrap {
    font-size: .875rem;
    margin-top: 1rem;
  }
}
/* ==================== ブレイク- 03/ 720 */
@media(max-width: 720px) {
  .wrapper-single .inner__others {
    margin-top: 2rem;
  }
  .w-single-container {
    padding-left: 1rem;
    padding-right: .5rem;
  }
  .w-single-desc-area h3 {
    font-size: 1.625rem;
    padding-top: 1.25rem;
  }
  .w-single .works-list__item h3 {
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .wrapper-single .works-list__item {
    width: calc(50% - 10px);
  }
  .wrapper-single .works-list__item:nth-child(3) {
    display: none;
  }

  /* 戻るボタン */
  .circle-btn a, .circle-btn-reverse a {
    width: 60px;
    height: 60px;
  }
  .circle-btn a::before, .circle-btn-reverse a::before {
    content: "";
    width: 30px;
    height: 30px;
  }
  .circle-btn a::before {
    transform: rotate(180deg);
    top: 15px;
    left: 0;
    right: 12px;
  }
  .circle-btn-reverse a::before {
    top: 15px;
    left: 17px;
    right: 15px;
  }
  .back-img p::after {
    width: 20px;
    height: 20px;
    top: -3px;
    margin-left: 6px;
  }
  .back-img p {
    font-size: .875rem;
    margin-top: -.5rem;
  }

  .related-title {
    margin-top: 5rem;
  }
  .related-title p {
    font-size: 2rem;
  }
}
/* ==================== ブレイク- 04/ 500 */
@media(max-width: 500px) {
  .back-img p {
    font-size: .875rem;
    margin-top: -.5rem;
  }
  .info-wrap p {
    font-size: .75rem;
    line-height: 1.8;
  }
}
/* ==================== ブレイク- 05/ 469 */
@media(max-width: 469px) {
  .w-single-img {
    margin-top: 1.5rem;
  }
  .w-single-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 240 / 130;
  }
  .w-single-container {
    padding-left: 1.25rem;
  }
  .w-single-desc-area h3 {
    font-size: 1.375rem;
  }
  .w-single-text {
    margin-top: 1.75rem;
  }
  .w-single__photo img {
    margin-bottom: 1rem;
  }
  .wrapper-single .works-list__items {
    margin-top: 1rem;
  }
  .wrapper-single .works-list__item {
    width: calc(100% - 10px);
  }
  .tool-list li {
    font-size: .8125rem;
    margin-top: .75rem;
  }
  .site-url-wrap {
    font-size: .8125rem;
    margin-top: .75rem;
  }
  .site-url-wrap::after {
    width: 16px;
    height: 10px;
  }

  /* 戻るボタン */
  .page-list-btn {
    margin-top: 2rem;
    padding-bottom: 1rem;
    padding-left: .5rem;
  }
  .circle-btn a, .circle-btn-reverse a {
    width: 40px;
    height: 40px;
  }
  .circle-btn a::before, .circle-btn-reverse a::before {
    width: 26px;
    height: 26px;
  }
  .circle-btn a::before {
    top: 7px;
    left: 0;
    right: 8px;
  }
  .circle-btn-reverse a::before {
    top: 7px;
    left: 9px;
    right: 15px;
  }
  .back-img img {
    width: 22vw;
    margin-bottom: .5rem;
  }
  .back-img p {
    font-size: .8125rem;
    margin-top: -.5rem;
  }

  /* Related Works */
  .wrapper-single .works-list__items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-right: .5rem;
  }
  .wrapper-single .works-list__item {
    display: flex;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
  }
  .wrapper-single .works-list__item:last-child {
    border-bottom: none;
  }
  .wrapper-single .thum-cate-list {
    flex: 2;
  }
  .wrapper-single .thumbnail {
    width: auto;
    height: auto;
    max-width: 100%;
  }
  .wrapper-single .works-list__item:nth-child(3) {
    display: block;
  }
}

/* 
========================================
SERVICE PAGE
======================================== */
.service-container {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  max-width: 100%;
}
.service-container h2 {
  margin-right: 3rem;
  line-height: .6;
}

/* サービス一覧 */
.service-list__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3.5rem;
  max-width: 100%;
}

.service-list__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2rem;
  width: calc(49.5% - 10px);
  padding: 0 2.25rem 2rem;
  background-color: var(--white);
  border-radius: 30px;
  box-shadow: 0px 0px 8px rgba(246, 239, 226, .8);
}

.s-img {
  margin: 0 auto;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.s-img img {
  width: 90%;
  padding-top: 2rem;
  object-fit: contain;
}

.s-titile {
  margin-top: .5rem;
}
.s-titile p {
  font-size: 1.5rem;
}
.s-titile .accent-mark {
  font-family: var(--en-font);
  font-size: 2rem;
  position: relative;
  top: 6px;
  margin-right: .5rem;
}

.s-text p {
  font-size: .8125rem;
  line-height: 2.4;
  text-align: justify;
  margin-top: .5rem;
}

/* FLOW-LIST */
.flow-container {
  margin-top: 8rem;
}
.flow-text {
  margin-left: 3rem;
}

.flow-list {
  width: 45vw;
  margin-top: 5.25rem;
}
.flow-list li {
  display: flex;
  align-items: start;
  position: relative;
  margin-left: 2rem;
  padding-left: 1.5rem;
}
/* 最後だけライン・下間隔を使用しない */
.flow-list li:not(:last-child) {
  border-left: 1px solid var(--primary-color);
  padding-bottom: 5.5rem;
}

.flow-list p.flow-number {
  font-family: var(--en-font);
  font-size: 3rem;
  line-height: 1.5;
  position: absolute;
  top: -2rem;
  left: -1.5rem;
  background-color: var(--base-color);
  padding: 8px 8px 18px;
}
.flow-list__item {
  padding: 0 2rem;
}
.flow-list__item h4 {
  font-size: 1.875rem;
  margin-bottom: 1rem;
}
.sp_br_remove-500 {
  display: none;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .service-list__item {
    padding: 0 2.2vw 2vw;
    margin-bottom: 5vh;
  }
  .s-img {
    height: 21vh;
  }
  .s-img img {
    padding-top: 4vh;
  }
  .s-titile p {
    font-size: 1.6vw;
  }
  .s-text p {
    font-size: .9vw;
    margin-top: .75vh;
  }
  .flow-container {
    margin-top: 13vh;
  }
  .flow-list p.flow-number {
    font-size: 3.2vw;
    top: -4.9vh;
    left: -2vw;
  }
  .flow-list__item h4 {
    font-size: 1.9vw;
    margin-bottom: 1.5vh;
  }
  .flow-list__item {
    padding: 0 0 0 2vw;
  }
  .flow-list li:not(:last-child) {
    padding-bottom: 11.5vh;
  }
}
/* ==================== ブレイク- 01/ 1250 */
@media(max-width: 1250px) {
  .sp_br_remove-1250 {
    display: none;
  }
  .flow-text {
    margin-left: 0rem;
  }
}
/* ==================== ブレイク- 02/ 900 */
@media(max-width: 900px) {
  .service-container {
    flex-direction: column;
  }
  .service-container h2 {
    font-size: calc(3rem - 4px);
    margin-left: 1vw;
    margin-right: 1.875rem;
    line-height: 0;
    margin-bottom: 2.5rem;
  }
  .service-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2rem;
    width: 100%;
    padding: 0 2.25rem 2rem;
    background-color: var(--white);
    border-radius: 30px;
  }
  .flow-container {
    margin-top: 6rem;
  }
  .flow-text {
    margin-left: 0;
  }
  .flow-list {
    width: 62vw;
    margin-top: 5.25rem;
    margin-left: 5vw;
  }
  .flow-list__item {
    padding: 0 0 0 2rem;
  }
  .sp_br_remove-900 {
    display: none;
  }
}
/* ==================== ブレイク- 03/ 720 */
@media(max-width: 720px) {
  .service-container h2 {
    font-size: 2.5rem;
    margin-left: 3.5vw;
  }
  .service-container .common-text {
    margin-left: 3.5vw;
    padding-right: .5rem;
  }
  .service-list__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 3.5rem;
    padding-left: 1rem;
  }
  .flow-list__item h4 {
    font-size: 1.625rem;
    margin-bottom: 1rem;
  }
}
/* ==================== ブレイク- 04/ 500 */
@media(max-width: 500px) {
  .service-list__items {
    margin-top: 1.5rem;
    padding-left: 1rem;
  }
  .service-list__item {
    margin-bottom: 1rem;
    width: calc(100% - 10px);
    padding: 0 1.5rem 1.5rem;
  }
  .s-img {
    height: 8rem;
  }
  .s-img img {
    width: 65%;
    padding-top: 2rem;
    object-fit: contain;
  }

  .s-titile p {
    font-size: 1.125rem;
  }
  .s-text p {
    font-size: .75rem;
    line-height: 2.2;
  }
  .flow-container {
    margin-top: 4rem;
  }
  .flow-list {
    width: 66vw;
    margin-top: 4rem;
    margin-left: 2vw;
    margin-bottom: 3rem;
  }
  .flow-list p.flow-number {
    font-family: var(--en-font);
    font-size: 2.75rem;
    line-height: 1.4;
    position: absolute;
    top: -2rem;
    left: -1.5rem;
    background-color: var(--base-color);
    padding: 8px 0px 18px;
  }
  .flow-list__item {
    padding: 0 .5rem;
    padding-right: 0;
  }
  .flow-list__item p {
    font-size: .75rem;
    line-height: 2.2;
  }
  .flow-list__item h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .sp_br_remove-500 {
    display: block;
  }
}
/* ==================== ブレイク- 05/ 496 */
@media(max-width: 496px) {
  .service-container h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .service-list__items {
    margin-right: -.5rem;
  }
  .flow-container{
    margin-left: .5rem;
  }
  .service-container .flow-text {
    padding-right: 1rem;
  }
  .flow-list p.flow-number {
    font-size: 2.25rem;
    line-height: 1.7;
    top: -1.5rem;
    left: -1.5rem;
    padding: 0 0 8px;
  }
  .flow-list {
    width: 66vw;
    margin-top: 4rem;
    margin-left: .5vw;
  }
  .flow-list li {
    margin-left: 1.25rem;
    padding-left: 1rem;
  }
  .flow-list__item h4 {
    font-size: 1.375rem;
    margin-bottom: .75rem;
  }
  .flow-list li:not(:last-child) {
    padding-bottom: 4.5rem;
  }
  .s-img {
    height: auto;
  }
}

/* 
========================================
CONTACT PAGE
======================================== */
.contact-container {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  max-width: 100%;
}
.contact-container h2 {
  margin-right: 3rem;
  line-height: .6;
}
.contact-text {
  margin-left: 3rem;
  padding-right: 3rem;
}
.contact-wrapper {
  margin: 0 auto;
  padding: 4rem 4rem;
  background-color: var(--white);
  border-radius: 30px;
  margin-top: 1.5rem;
  position: relative;
  box-shadow: 0px 0px 8px rgba(246, 239, 226, .8);
}
/* イラストアニメーション */
.contact-anime {
  position: absolute;
  bottom: 30vh;
  left: -19vw;
  width: 16vw;
}
.contact-anime img {
  width: 100%;
  object-fit: contain;
}

.form-wrap {
  width: 100%;
}

.form-wrap dl,
.form-wrap dt,
.form-wrap dd {
  font-size: .9375rem;
  font-weight: normal;
  line-height: 1.5;
}

.form-wrap dl {
  display: flex;
  justify-content: space-between;
  justify-content: start;
  align-items: baseline;
}
.form-wrap .message-box {
  align-items: flex-start;
}
.form-wrap dt, 
.form-wrap dd {
  padding-bottom: 2rem;
}
.form-wrap dt {
  width: 38%;
}
.form-wrap dd {
  width: 62%;
}

.form-wrap .margin-0 {
  margin-top: 0;
}

.form-wrap dt {
  text-align: left;
}
.form-wrap dt.message {
  padding-top: 10px;
  vertical-align: top;
}

/* ※記号 */
.required::after {
  content: "※";
  display: inline-block;
  padding-left: 8px;
  color: var(--accent-color);
}

/* ラジオボタン項目 */
.radio-items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.radio-items div {
  margin-right: 2rem;
}
.radio-items div:not(:last-child) {
  /* margin-bottom: .5rem; */
  /* WordPress化で変更 */
  margin-bottom: 0;
}
/* ラジオボタン選択時の色変更 */
input[type=radio] {
  accent-color: var(--primary-color);
  margin-right: 2px;
  margin-bottom: 4px;
  /* margin-left: 1rem; */
}

/* 入力エリア */
input[type=text], 
input[type=email], 
input[type=tel], 
input[type=date], 
textarea {
  width: 100%;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}

/* 送信ボタン */
.btn-wrap {
  width: 100%;
  margin: 0 auto;
  margin-top: 1rem;
  text-align: center;
  /* 1126追加 */
  display: flex;
  justify-content: center;
}
.btn-submit {
  /* WordPress側 */
  /* padding: 1rem 2rem 1rem 3rem; */
  padding: 0.125rem 1.875rem 0.125rem 2.875rem;
  font-size: 1.125rem;
  font-family: var(--wa-font);
  font-weight: normal;
  letter-spacing: 1em;
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: 50px;
  transition: all .4s;
}
.btn-submit:hover {
  opacity: .8;
  transition: all .4s;
}

/* フッター位置上げる */
.contact__footer {
  margin-top: -3rem;
}
/* 疑似要素イラスト非表示 */
.f-line.contact-f-line::before {
  display: none;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .contact-wrapper {
    padding: 4vw 4vw;
    border-radius: 30px;
    margin-top: 1.5rem;
  }
  .contact-text {
    margin-left: 3vw;
    padding-right: 3vw;
  }
  .form-wrap dl, .form-wrap dt, .form-wrap dd {
    font-size: 1vw;
  }
  .form-wrap dt, .form-wrap dd {
    padding-bottom: 5vh;
  }
  .btn-submit {
    /* padding: 1vw 2vw 1vw 3vw; */
    /* WordPress化で変更 */
    padding: .125vw 2vw .125vw 3vw;
    font-size: 1.2vw;
  }
}
/* ==================== ブレイク- 01/ 1250 */
@media(max-width: 1250px) {
  .contact-text {
    margin-left: 0;
    padding-right: 0;
  }
}
/* ==================== ブレイク- 02/ 1025-PC */
@media(max-width: 1025px) {
  .contact-container {
    flex-direction: column;
  }
  .contact-container h2 {
    font-size: calc(3rem - 4px);
    margin-left: 1vw;
    margin-right: 1.875rem;
    line-height: 0;
    margin-bottom: 2.5rem;
  }
  .contact-text {
    margin-left: 0;
    padding-right: 0;
  }
  .contact-anime {
    position: absolute;
    bottom: 22vh;
    left: 4vw;
    width: 16vw;
  }
}
/* ==================== ブレイク- 03/ 1025-T&M */
@media(max-width: 1025px) and (pointer: coarse) {
  .contact-anime {
    bottom: 11vh;
  }
}
/* ==================== ブレイク- 04/ 800 */
@media(max-width: 800px) {
  .contact-anime {
    position: absolute;
    bottom: 20vh;
    left: 5vw;
    width: 16vw;
  }
  .thumb-text p {
    font-size: .75rem;
    line-height: 2.4;
    letter-spacing: 1px;
  }
}
/* ==================== ブレイク- 05/ 720 */
@media(max-width: 720px) {
  .contact-container h2 {
    font-size: 2.5rem;
    margin-left: 3.5vw;
  }
  .contact-container .common-text {
    margin-left: 3.5vw;
    padding-right: .5rem;
  }
  .contact-wrapper {
    padding: 3rem 2rem;
  }
  .form-wrap dl, .form-wrap dt, .form-wrap dd {
    font-size: .9375rem;
    font-weight: normal;
    line-height: 1.5;
    flex-direction: column;
    width: 100%;
  }
  .form-wrap dt {
    padding-bottom: 0;
  }
  .form-wrap dd {
    padding-bottom: 1.75rem;
  }
  .form-wrap dt.message {
    padding-top: 10px;
    vertical-align: top;
    width: 100%;
  }
  .contact-anime {
    position: absolute;
    bottom: 22vh;
    left: -11vw;
    width: 16vw;
  }
  .text-margin {
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 933px) and (pointer: coarse) and (orientation: landscape) {
  .contact-anime {
    bottom: 36vh;
  }
}
@media (max-width: 720px) and (min-height: 1000px) {
  .contact-anime {
    display: none;
  }
}
@media(max-width: 720px) and (max-height: 500px) and (orientation: landscape) {
  .contact-anime {
    bottom: 36vh;
  }
}
/* ==================== ブレイク- 06/ 500 */
@media(max-width: 500px) {
  .contact-wrapper {
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    background-color: var(--white);
    border-radius: 30px;
    margin-top: 1.5rem;
    position: relative;
  }
  .form-wrap dl, .form-wrap dt, .form-wrap dd {
    font-size: .8125rem;
    font-weight: normal;
    line-height: 1.5;
  }
  .contact-anime {
    bottom: 25vh;
    left: -11vw;
    width: 16vw;
  }
  .btn-wrap {
    margin-top: 0;
  }
  .btn-submit {
    /* padding: .75rem 1rem .75rem 1.5rem; */
    /* WordPress化で変更 */
    padding: .125rem 1rem .125rem 1.5rem;
    font-size: 1rem;
  }
}
/* ==================== ブレイク- 07/ 496 */
@media(max-width: 496px) {
  .contact-container h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  input[type=text], 
  input[type=email], 
  input[type=tel], 
  input[type=date], 
  textarea {
    width: 100%;
    padding: 2px 8px;
  }
  .form-wrap dd {
    /* padding-bottom: 1.5rem; */
    /* WordPress化で変更 */
    padding-bottom: 1rem;
  }
}
/* ==================== ブレイク- 08/ 420 */
@media(max-width: 420px) {
 .contact-anime {
    bottom: 29vh;
    left: -11vw;
    width: 16vw;
  }
  .thumb-text p {
    font-size: .75rem;
    line-height: 2;
  }
  .others__footer {
    padding-top: 7rem;
  }
  .text-margin {
    margin-bottom: 0;
  }
}
@media(max-width: 431px) and (pointer: coarse) {
  .contact-anime {
    bottom: 15vh;
  }
}
/* ==================== ブレイク- 09/ 376 */
@media(max-width: 376px) {
 .contact-anime {
    bottom: 23vh;
    left: -11vw;
    width: 16vw;
  }
}

/* 
========================================
PRIVACY POLICY PAGE
======================================== */
.privacy-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin-top: -3.5rem;
  max-width: 100%;
}
.privacy-container img {
  width: 10vw;
  margin-right: 4vw;
}
.privacy-container h2 {
  margin-right: 3rem;
  line-height: .6;
  margin-bottom: 2.25rem;
}
.privacy-container .privacy-text {
  width: 80%;
}
.privacy-container .privacy-text p:not(:last-child) {
  margin-bottom: 60px;
}
.privacy-text h4 {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}
/* アニメーションの点滅対策 */
.apng {
  opacity: 1 !important;
  transition: none !important;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .privacy-container h2 {
    margin-bottom: 2.25vw;
  }
  .privacy-text h4 {
    font-size: 1.7vw;
    margin-bottom: .5vw;
  }
  .privacy-container .privacy-text p:not(:last-child) {
    margin-bottom: 4vw;
  }
}
/* ==================== ブレイク- 01/ 900 */
@media(max-width: 900px) {
  .adjust-wrapper .inner__others {
    margin-top: 6rem;
    margin-left: 0;
  }
  .privacy-container h2 {
    margin-right: 0;
    line-height: .6;
    margin-bottom: 2.25rem;
    margin-left: 0;
  }
  .privacy-text h4 {
    margin-bottom: .5rem;
  }
  .privacy-container .privacy-text {
    width: 100%;
    padding-left: 9vw;
  }
  .position-text {
    margin-right: 0;
  }
}
/* ==================== ブレイク- 02/ 720 */
@media(max-width: 720px) {
  .privacy-text h4 {
    font-size: 1.25rem;
    margin-bottom: .5rem;
  }
}
/* ==================== ブレイク- 03/ 496 */
@media(max-width: 496px) {
  .privacy-container {
    margin-left: .5rem;
  }
  .privacy-text h4 {
    font-size: 1.125rem;
  }
  .common-text.privacy-text p {
    font-size: .75rem;
  }
}

/* 
========================================
404 PAGE
======================================== */
.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4vw;
  margin-top: 2rem;
}
.home-btn .common-btn {
  font-size: 1.5rem;
  padding: .5rem 1.5rem 1rem;
}
.home-btn span img {
  width: 19px;
  height: auto;
  margin-right: 0;
  margin-left: .5rem;
}
.position-text {
  margin-right: 3vw;
}

/* mobile layout ==========*/
/*
==================== ブレイク- 00/ 基準より大 */
@media(min-width: 1439px) {
  .position-text {
    font-size: 1.2vw;
  }
  .home-btn .common-btn {
    font-size: 1.5vw;
    padding: .5vw 1.5vw 1vw;
  }
}
/* ==================== ブレイク- 01/ 1025 */
@media (max-width: 1025px) and (pointer: coarse) {
  .privacy-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    /* margin-top: 0; */
    max-width: 100%;
  }
}
/* ==================== ブレイク- 02/ 900 */
@media(max-width: 900px) {
  .position-text {
    margin-right: -1rem;
  }
}
/* ==================== ブレイク- 03/ 821 */
@media(max-width: 821px) {
  .privacy-container img {
    width: 19vw;
    margin-right: 4vw;
  }
  .adjust-wrapper .inner__others {
    margin-top: 6rem;
    margin-left: 0;
    margin-right: .5rem;
  }
}
/* ==================== ブレイク- 04/ 496 */
@media(max-width: 496px) {
  .privacy-container img {
    width: 24vw;
    margin-right: 4vw;
  }
  .privacy-container h2 {
    margin-bottom: 1.5rem;
  }
  .position-text {
    font-size: .75rem;
  }
  .home-btn .common-btn {
    font-size: 1.25rem;
    padding: .25rem 1.25rem .75rem;
  }
}

/* WordPress側 */
.wpcf7-list-item {
  display: inline-block;
  margin: 0 3rem 0 0;
}
.wpcf7-spinner {
  display: none;
}

/* ▼ 共通（読み込み成功時・送信前） */
.wpcf7 form .wpcf7-response-output {
  margin: 2em 0.5em 1em;
  padding: 0.5rem 1em 0.5rem 2.8em; /* アイコン分の左余白 */
  border: 2px solid rgba(0, 160, 210, .4);
  background: rgba(0, 160, 210, .6);
  border-radius: 50px;
  color: #FFF;
  line-height: 1.5;
  position: relative; /* ← アイコン用 */
}

/* ▼ 共通アイコンのベース（:before） */
.wpcf7 form .wpcf7-response-output:before {
  content: "ℹ"; /* デフォルトの案内アイコン */
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

/* ▼ 成功（✔） */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(0, 190, 172, .3);
  background: rgba(0, 190, 172, .6);
  color: #FFF;
}

.wpcf7 form.sent .wpcf7-response-output:before {
  content: "✔";
}

/* ▼ エラー（⚠） */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: rgba(255, 94, 118, .3);
  background: rgba(255, 94, 118, .6);
  color: #FFF;
}

.wpcf7 form.invalid .wpcf7-response-output:before,
.wpcf7 form.unaccepted .wpcf7-response-output:before,
.wpcf7 form.payment-required .wpcf7-response-output:before {
  content: "⚠";
}

.wpcf7-not-valid-tip {
  color: var(--accent-color);
  font-size: .875em;
  font-weight: normal;
  display: block;
}

/* mobile layout ==========*/
@media (max-width: 500px) {
  .wpcf7 form .wpcf7-response-output {
    font-size: .875rem;
  }
}

/* reCAPHAバッジの非表示 */
.grecaptcha-badge {
  visibility: hidden;
}