@charset "utf-8";

:root {
  --cts-font-md: 18px;
  --cts-font-lg: 24px;
  --cts-font-xl: 36px;
  --cts-font-2xl: 48px;
  --cts-font-3xl: 96px;
  --cts-font-4xl: 192px;

  /* color */
  --cts-color-main: #004da1;
  --cts-color-main-light: #d9f1fb;
  --cts-color-sub: #00a2e6;
  --cts-color-accent: #ffd800;
  
  /* gap */
  --cts-gap: 30px;
  
  /* border */
  --cts-border: 4px;
}

/* LP共通汎用
____________________*/
#lp .contents__inner{
  width:92vw;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  color: #000;
}
#lp img{
  max-width: 100%;
}

/* KV
____________________*/
.kv img{
  width: 100%;
}

/* 選ばれる理由
____________________*/
.index-reason{
  padding: 0 0 calc(var(--cts-gap) * 4) 0;
  background: var(--cts-color-sub) url(../images/bg-menu.webp) no-repeat 50% top;
  background-size: cover;
}
.index-reason h2{
  text-align: center;
}
.index-reason li{
  filter: drop-shadow(var(--cts-border) 0 0 #000) drop-shadow(0 var(--cts-border) 0 #000) drop-shadow(calc(var(--cts-border) * -1) 0 0 #000) drop-shadow(0 calc(var(--cts-border) * -1) 0 #000) drop-shadow(var(--cts-border) var(--cts-border) 0 #000);
  transition: 0.3s all;
}
.index-reason li:has(a:hover){
  filter: drop-shadow(var(--cts-border) 0 0 #000) drop-shadow(0 var(--cts-border) 0 #000) drop-shadow(calc(var(--cts-border) * -1) 0 0 #000) drop-shadow(0 calc(var(--cts-border) * -1) 0 #000) drop-shadow(calc(var(--cts-border) * 3) calc(var(--cts-border) * 3) 0 #000);
}
.index-reason a{
  padding: var(--cts-gap);
  display: flex;
  align-items: center;
  background: var(--cts-color-main-light) url(../images/dot-odd.webp) no-repeat 50% 50%;
  background-size:100%;
  color: #000;
  column-gap: var(--cts-gap);
  font-size: var(--cts-font-xl);
  font-weight: 700;
  position: relative;
  transition: 0.3s all;
}
.index-reason a:hover{
  filter: brightness(1.2);
  transform: translate(calc(var(--cts-border) * -2),calc(var(--cts-border) * -2));
}
.index-reason a::before{
  font-family: Roboto;
  font-weight: 700;
  font-size: var(--cts-font-3xl);
}
.index-reason li:nth-child(even) a{
  background: var(--cts-color-main) url(../images/dot-even.webp?240515-001) no-repeat 50% 50%;
  background-size: 100%;
  color: #fff;
}
a.index-reason--01{
  padding-bottom: calc(var(--cts-gap) * 2);
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 calc(100% - var(--cts-gap)));
}
a.index-reason--02{
  padding-top: calc(var(--cts-gap) * 2);
  padding-bottom: calc(var(--cts-gap) * 2);
  clip-path: polygon(0 0, 100% var(--cts-gap), 100% calc(100% - var(--cts-gap)), 0 100%);
}
a.index-reason--03{
  padding-top: calc(var(--cts-gap) * 2);
  padding-bottom: calc(var(--cts-gap) * 2);
  clip-path: polygon(0 var(--cts-gap), 100% 0, 100% 100%, 0 calc(100% - var(--cts-gap)));
}
a.index-reason--04{
  padding-top: calc(var(--cts-gap) * 2);
  clip-path: polygon(0 0, 100% var(--cts-gap), 100% 100%, 0 100%);
}
.index-reason--01::before{
  content: "01";
}
.index-reason--02::before{
  content: "02";
}
.index-reason--03::before{
  content: "03";
}
.index-reason--04::before{
  content: "04";
}
.index-reason a div{
  padding: var(--cts-gap) 0 var(--cts-gap) var(--cts-gap);
  flex: 1;
  border-left: 1px solid #000;
}
.index-reason li:nth-child(even) a div{
  border-color: #fff;
}

/* 理由詳細
____________________*/
.reason{
  padding: calc(var(--cts-gap) * 4) 0;
  position: relative;
}
.reason:nth-child(odd){
  background: var(--cts-color-main-light) url(../images/dot-odd.webp) 50% top no-repeat;
  background-size: 100%;
}
.reason:nth-child(even){
  background: var(--cts-color-main) url(../images/dot-even.webp) 50% top no-repeat;
  background-size: 100%;
}
.reason::before{
  content: "";
  width: 33vw;
  height: 33vw;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
#reason--1::before{
  background: url(../images/bg-01.webp) no-repeat 0 0;
  background-size: contain;
}
#reason--2::before{
  background: url(../images/bg-02.webp) no-repeat 0 0;
  background-size: contain;
}
#reason--3::before{
  background: url(../images/bg-03.webp) no-repeat 0 0;
  background-size: contain;
}
#reason--4::before{
  background: url(../images/bg-04.webp) no-repeat 0 0;
  background-size: contain;
}
.reason-sub-title{
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  font-size: var(--cts-font-lg);
  font-weight: 700;
}
.reason-sub-title span{
  display: block;
  font-size: var(--cts-font-3xl);
  line-height: 1;
}
.reason-title{
  margin-bottom: calc(var(--cts-gap) * 4);
  font-size: var(--cts-font-2xl);
  font-weight: 700;
}
.reason-title span{
  margin-top: 0.1em;
  font-size: var(--cts-font-3xl);
  display: block;
}
.reason:nth-child(odd) .reason-title,.reason:nth-child(odd) .reason-sub-title{
  color: #000;
}
.reason:nth-child(odd) .reason-title span{
  color: var(--cts-color-main);
}
.reason:nth-child(even) .reason-title,.reason:nth-child(even) .reason-sub-title{
  color: #fff;
}
.reason:nth-child(even) .reason-title span{
  color:  var(--cts-color-accent);
}
.message{
  padding: calc(var(--cts-gap) * 2) var(--cts-gap);
  background: #6192c8;
  border-radius: var(--cts-gap);
  border: var(--cts-border) solid #000;
  box-shadow: var(--cts-border) var(--cts-border) 0 #000 , inset var(--cts-border) var(--cts-border) 0 #fff;
}
.message__item{
  display: flex;
  gap: var(--cts-gap);
}
.message__item::before{
  content: "";
  width: calc(var(--cts-gap) * 3);
  height: calc(var(--cts-gap) * 3);
  display: block;
  border-radius: calc(var(--cts-gap) * 1.5);
}
.message__item p{
  flex: 1;
  line-height: 1.75;
}
.message .message__item+.message__item{
  margin-top: var(--cts-gap);
}
.message .message__item--get p span,.message .message__item--post p span{
  font-size: var(--cts-font-md);
}
.message .message__item--get p{
  margin-right: calc(var(--cts-gap) * 6);
  padding: var(--cts-gap);
  background: #e6edf6;
  border-radius: var(--cts-gap);
  position: relative;
  font-size: var(--cts-font-lg);
}
.message .message__item--get p::before{
  content: "";
  width: calc(var(--cts-gap) / 2);
  height: calc(var(--cts-gap) / 2);
  display: block;
  clip-path: polygon(100% 3%, 0 50%, 100% 100%);
  background: #e6edf6;
  position: absolute;
  left: calc(var(--cts-gap) / 2 * -1 + 1px);
  top: var(--cts-gap);
}
.message .message__item--post p{
  margin-left: calc(var(--cts-gap) * 6);
  padding: var(--cts-gap);
  background: #e5f3e0;
  border-radius: var(--cts-gap);
  position: relative;
  font-size: var(--cts-font-lg);
}
.message .message__item--post p::before{
  content: "";
  width: calc(var(--cts-gap) / 2);
  height: calc(var(--cts-gap) / 2);
  display: block;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #e5f3e0;
  position: absolute;
  right: calc(var(--cts-gap) / 2 * -1 + 1px);
  top: var(--cts-gap);
}
.message--large{
  margin-bottom: calc(var(--cts-gap) * 2);
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.message--large .message__item{
  gap: var(--cts-gap);
  font-size: var(--cts-font-xl);
}
.message--large .message__item::before{
  content: "";
  width: calc(var(--cts-gap) * 6);
  height: calc(var(--cts-gap) * 6);
  display: block;
  border-radius: calc(var(--cts-gap) * 3);
  border: var(--cts-border) solid #000;
}
.message--large .message__item+.message__item{
  margin-top: calc(var(--cts-gap) * 2);
}
.reason:nth-child(even) .message--large .message__item p{
  color: #fff;
  filter: drop-shadow(0 0 calc(var(--cts-gap) / 3) var(--cts-color-main));
}
.message--large .message__item--get p{
  margin-right: 0;
  padding: 0;
  background: none;
  font-size: var(--cts-font-xl);
}
.message--large  .message__item--get p::before{
  display: none;
}
.message--large  .message__item--post p{
  margin-right: 0;
  padding: 0;
  background: none;
  font-size: var(--cts-font-xl);
}
.message--large  .message__item--post p::before{
  display: none;
}
.show-message{
  position: relative;
}
.show-message::after{
  content: "";
  width: 100%;
  height: calc(var(--cts-gap) * 6);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(97, 146, 200, 1) 0%, rgba(97, 146, 200, 1) 25%, rgba(97, 146, 200, 0) 100%);
}
.hide-message{
  margin-top: var(--cts-gap);
  opacity: 0;
  position: absolute;
  transition: 0.3s all;
}
.toggle-message-check{
  display: none;
}
.toggle-message-label{
  padding: 1em;
  color: #fff;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(2em);
  display: flex;
  align-items: center;
  gap:0.5em;
  font-size: var(--cts-font-md);
}
.toggle-message-label::after{
  content: "";
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  display: block;
  clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%, 80% 50%);
  background: #fff;
  animation: 2s infinite toggle-message-label-icon;
}
@keyframes toggle-message-label-icon{
  0%{
    transform: translateY(0);
  }
  30%{
    transform: translateY(1em);
  }
  60%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0);
  }
}
.toggle-message-check:checked + .message .hide-message{
  position: relative;
  opacity: 1;
  top: 0;
}
.toggle-message-check:checked + .message .toggle-message-label{
  display: none;
}
.toggle-message-check:checked + .message .show-message::after{
  display: none;
}
.message__item--post-normal,.message__item--post-sad,.message__item--post-proud,.message__item--post-smile{
  flex-direction: row-reverse;
}
.message__item--get-normal::before{
  background: #fff url(../images/icon-male-normal.webp) 50% 50% no-repeat;
  background-size: cover;
}
.message__item--get-sad::before{
  background: #fff url(../images/icon-male-sad.webp) 50% 50% no-repeat;
  background-size: cover;
}
.message__item--get-fear::before{
  background: #fff url(../images/icon-male-fear.webp) 50% 50% no-repeat;
  background-size: cover;
}
.message__item--get-smile::before{
  background: #fff url(../images/icon-male-smile.webp) 50% 50% no-repeat;
  background-size: cover;
}
.message__item--post-normal::before{
  background: #fff url(../images/icon-female-normal.webp) 50% 50% no-repeat;
  background-size: cover;
}
.message__item--post-sad::before{
  background: #fff url(../images/icon-female-sad.webp) 50% 50% no-repeat;
  background-size: cover;
}
.message__item--post-proud::before{
  background: #fff url(../images/icon-female-proud.webp) 50% 50% no-repeat;
  background-size: cover;
}
.message__item--post-smile::before{
  background: #fff url(../images/icon-female-smile.webp) 50% 50% no-repeat;
  background-size: cover;
}
.button-cv{
  width: 100%;
  height: calc(var(--cts-gap) * 3);
  margin-top: calc(var(--cts-gap) * 2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--cts-gap) * 1.5);
  border: var(--cts-border) solid #000;
  box-shadow: var(--cts-border) var(--cts-border) 0 #000;
  background: #fff;
  color: #000;
  font-size: var(--cts-font-lg);
  font-weight: 700;
  text-align: center;
  transition: 0.3s all;
}
.button-cv:hover{
  filter: brightness(1.2);
  transform: translate(calc(var(--cts-border) * -2),calc(var(--cts-border) * -2));
  box-shadow: calc(var(--cts-border) * 3) calc(var(--cts-border) * 3) 0 #000;
}
.button-cv::after{
  content: "";
  width: 1em;
  height: 1em;
  display: block;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 35% 100%, 85% 50%, 35% 0);
  background: #000;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

/* レスポンシブ
____________________*/
@media screen and (max-width:1040px){
  :root{
    --cts-font-md: 2.4vw;
    --cts-font-lg: 3.2vw;
    --cts-font-xl: 4.8vw;
    --cts-font-2xl: 6.4vw;
    --cts-font-3xl: 10.8vw;
    --cts-font-4xl: 25.6vw;
    --cts-gap: 4vw;
    --cts-border: 0.53vw;
  }
  #lp .u-pc-hide{
    display: block;
  }
  .index-reason {
    background: var(--cts-color-sub) url(../images/bg-menu-sp.webp) no-repeat 50% top;
    background-size: cover;
  }
  .index-reason li a,.index-reason li:nth-child(even) a{
    background-size: 100vh;
  }
  .index-reason li a img{
    display: none;
  }
  .index-reason a div {
    padding: 0 0 0 var(--cts-gap);
  }
  .reason::before{
    width: 60vw;
    height: 60vw;
  }
  #reason--1::before{
    background: url(../images/bg-01-sp.webp) no-repeat 0 0;
    background-size: contain;
  }
  #reason--2::before{
    background: url(../images/bg-02-sp.webp) no-repeat 0 0;
    background-size: contain;
  }
  #reason--3::before{
    background: url(../images/bg-03-sp.webp) no-repeat 0 0;
    background-size: contain;
  }
  #reason--4::before{
    background: url(../images/bg-04-sp.webp) no-repeat 0 0;
    background-size: contain;
  }
  .reason:nth-child(odd),.reason:nth-child(even){
    background-size: 100vh;
  }
  .reason-sub-title{
    display: flex;
    align-items: center;
    gap: calc(var(--cts-gap) / 4);
    top: calc(var(--cts-gap) * -3);
    right: 0;
    font-size: var(--cts-font-md);
  }
  .reason-sub-title span{
    font-size: var(--cts-font-2xl);
  }
  .message--large .message__item{
    gap: var(--cts-gap);
  }
  .message .message__item--get p{
    margin-right: calc(var(--cts-gap)* 5);
  }
  .message .message__item--post p{
    margin-left: calc(var(--cts-gap)* 5);
  }
  .message--large .message__item--get p{
    margin-right: 0;
  }
  .message--large .message__item--post p{
    margin-left: 0;
  }
  .toggle-message-label{
    font-size: var(--cts-font-lg);
  }
  .button-cv{
    height: calc(var(--cts-gap) * 4);
    border-radius: calc(var(--cts-gap) * 2);
    font-size: var(--cts-font-xl);
  }
  .button-cv::after{
    width: 0.75em;
    height: 0.75em;
    right: 0.75em;
  }
}