@charset "UTF-8";
/*-- libフォルダの中の_index.scss --*/
:root {
  --theme-color-1: #fff;
  --theme-color-2: #000;
  --theme-color-3: #227b29;
  --theme-color-4: #ff7a8d;
  --theme-color-5: #ce0000;
  --theme-color-6: #ff4c65;
  --theme-color-7: #df0615;
  --theme-color-8: #0075c1;
  --theme-color-9: #00bd2a;
  --theme-color-10: #cf6847;
  --theme-color-11: #009a98;
  --breakpoint-standard: pc;
  --breakpoint-xl: 1200px;
  --breakpoint-lg: 960px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 560px;
  --breakpoint-xs: 320px;
}

/*
#overview
共通スタイル（_common.scss）

*/
/* ==========================================================================
   RESET STYLE
   ========================================================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section {
  display: block;
}

button,
[type=reset],
[type=button],
[type=submit] {
  appearance: button;
  cursor: pointer;
}

/* ==========================================================================
   FONT SET
   ========================================================================== */
/* ==========================================================================
   HTML / BODY
   ========================================================================== */
html {
  height: 100%;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 6.25%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  height: 100%;
  font: 16rem/1.7 "Noto Sans JP", sans-serif;
  color: #000;
  font-weight: 400;
  font-style: normal;
  background-color: #fff;
}

/* ==========================================================================
   LIST
   ========================================================================== */
ul, ol {
  list-style: none;
}

.list-style-disc li {
  padding-left: 1em;
  text-indent: -1em;
}
.list-style-disc li::before {
  content: "・";
  font-family: "Noto Sans JP", sans-serif;
}

/* ==========================================================================
   LINK
   ========================================================================== */
a {
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  vertical-align: baseline;
  background-color: transparent;
}
a:link, a:visited, a:hover, a:focus, a:active {
  color: #000;
}
a:hover, a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */
img, embed, object, audio, video, iframe {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

img[src$=".svg"] {
  width: 100%;
}

/* ==========================================================================
   TABLE
   ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/* ==========================================================================
   ゴシック体
   ========================================================================== */
/*
#styleguide
ゴシック体

テキストをゴシック体にする場合はこのclassを使う
```
<p class="ff-gothic">窓も扉のかっこう棒手がゴーシュで叫ぶ音楽ました。</p>
```
*/
.ff-gothic {
  font-family: true;
}

/* ==========================================================================
   ゴシック体
   ========================================================================== */
/*
#styleguide
ゴシック体

テキストをゴシック体にする場合はこのclassを使う
```
<p class="ff-gothic">窓も扉のかっこう棒手がゴーシュで叫ぶ音楽ました。</p>
```
*/
.ff-nsj {
  font-family: "Noto Sans JP", sans-serif;
}

/* ==========================================================================
   明朝体
   ========================================================================== */
/*
#styleguide
明朝体

テキストを明朝体にする場合はこのclassを使う
```
<p class="ff-mincho">窓も扉のかっこう棒手がゴーシュで叫ぶ音楽ました。</p>
```
*/
.ff-mincho {
  font-family: "Noto Serif JP", serif;
}

.ff-nsj {
  font-family: Arial Black, sans-serif;
}

/*
#styleguide
マージン

marginに5pxずつ50pxまで
```
<div class="mt0">テキスト</div>
<div class="mt5">テキスト</div>
<div class="mt10">テキスト</div>
<div class="mt50">テキスト</div>
```
*/
/* ==========================================================================
   IMPORTANT MARGIN
   ========================================================================== */
.m0 {
  margin: 0px !important;
}

.mt0 {
  margin-top: 0px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.m-n0 {
  margin: 0px !important;
}

.mx0 {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.mx-n0 {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.my0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.my-n0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.m5 {
  margin: 5px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.m-n5 {
  margin: -5px !important;
}

.mx5 {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.mx-n5 {
  margin-right: -5px !important;
  margin-left: -5px !important;
}

.my5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.my-n5 {
  margin-top: -5px !important;
  margin-bottom: -5px !important;
}

.m10 {
  margin: 10px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.m-n10 {
  margin: -10px !important;
}

.mx10 {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

.mx-n10 {
  margin-right: -10px !important;
  margin-left: -10px !important;
}

.my10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.my-n10 {
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}

.m15 {
  margin: 15px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.m-n15 {
  margin: -15px !important;
}

.mx15 {
  margin-right: 15px !important;
  margin-left: 15px !important;
}

.mx-n15 {
  margin-right: -15px !important;
  margin-left: -15px !important;
}

.my15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.my-n15 {
  margin-top: -15px !important;
  margin-bottom: -15px !important;
}

.m20 {
  margin: 20px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.m-n20 {
  margin: -20px !important;
}

.mx20 {
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.mx-n20 {
  margin-right: -20px !important;
  margin-left: -20px !important;
}

.my20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.my-n20 {
  margin-top: -20px !important;
  margin-bottom: -20px !important;
}

.m25 {
  margin: 25px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.m-n25 {
  margin: -25px !important;
}

.mx25 {
  margin-right: 25px !important;
  margin-left: 25px !important;
}

.mx-n25 {
  margin-right: -25px !important;
  margin-left: -25px !important;
}

.my25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.my-n25 {
  margin-top: -25px !important;
  margin-bottom: -25px !important;
}

.m30 {
  margin: 30px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.m-n30 {
  margin: -30px !important;
}

.mx30 {
  margin-right: 30px !important;
  margin-left: 30px !important;
}

.mx-n30 {
  margin-right: -30px !important;
  margin-left: -30px !important;
}

.my30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.my-n30 {
  margin-top: -30px !important;
  margin-bottom: -30px !important;
}

.m35 {
  margin: 35px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.m-n35 {
  margin: -35px !important;
}

.mx35 {
  margin-right: 35px !important;
  margin-left: 35px !important;
}

.mx-n35 {
  margin-right: -35px !important;
  margin-left: -35px !important;
}

.my35 {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.my-n35 {
  margin-top: -35px !important;
  margin-bottom: -35px !important;
}

.m40 {
  margin: 40px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.m-n40 {
  margin: -40px !important;
}

.mx40 {
  margin-right: 40px !important;
  margin-left: 40px !important;
}

.mx-n40 {
  margin-right: -40px !important;
  margin-left: -40px !important;
}

.my40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.my-n40 {
  margin-top: -40px !important;
  margin-bottom: -40px !important;
}

.m45 {
  margin: 45px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.m-n45 {
  margin: -45px !important;
}

.mx45 {
  margin-right: 45px !important;
  margin-left: 45px !important;
}

.mx-n45 {
  margin-right: -45px !important;
  margin-left: -45px !important;
}

.my45 {
  margin-top: 45px !important;
  margin-bottom: 45px !important;
}

.my-n45 {
  margin-top: -45px !important;
  margin-bottom: -45px !important;
}

.m50 {
  margin: 50px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.m-n50 {
  margin: -50px !important;
}

.mx50 {
  margin-right: 50px !important;
  margin-left: 50px !important;
}

.mx-n50 {
  margin-right: -50px !important;
  margin-left: -50px !important;
}

.my50 {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}

.my-n50 {
  margin-top: -50px !important;
  margin-bottom: -50px !important;
}

.mx-auto {
  margin: 0 auto !important;
}

/* ==========================================================================
   IMPORTANT CLASS
   ========================================================================== */
.x-small {
  font-size: 80% !important;
}

.small {
  font-size: 91% !important;
}

.large {
  font-size: 120% !important;
}

.light {
  font-weight: 300 !important;
}

.bold {
  font-weight: bold !important;
}

.normal {
  font-weight: 400 !important;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

.att {
  color: #ff0000 !important;
}

.borderNone {
  border: 0 !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block;
}

.none {
  display: none !important;
}

.show {
  visibility: visible !important;
}

.hide {
  visibility: hidden !important;
}

.indent {
  padding-left: 1em !important;
  text-indent: -1em !important;
}

.disabled {
  cursor: default !important;
  pointer-events: none !important;
  opacity: 0.3 !important;
}

.underline {
  text-decoration: underline !important;
}

.h100p {
  height: 100%;
}

.lh1 {
  line-height: 1;
}

/* ==========================================================================
   viewportによって改行
   ========================================================================== */
/*
#styleguide

5つのブレイクブレイクポイント（xs, sm ,md, lg, xl）による表示/非表示
<br>タグに使うと表示幅によって改行したり、改行を取ったりできる

0px以上で非表示・・・d-none
0px以上で表示・・・d-block
xs以上で非表示・・・d-xs-none
xs以上で表示・・・d-xs-block
sm以上で非表示・・・d-sm-none
sm以上で表示・・・d-sm-block
md以上で非表示・・・d-md-none
md以上で表示・・・d-md-block
lg以上で非表示・・・d-lg-none
lg以上で表示・・・d-lg-block
xl以上で非表示・・・d-xl-none
xl以上で表示・・・d-xl-block


```
```
*/
.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-xs-none {
  display: block !important;
}
@media only screen and (min-width: 320px) {
  .d-xs-none {
    display: none !important;
  }
}

.d-xs-block {
  display: none !important;
}
@media only screen and (min-width: 320px) {
  .d-xs-block {
    display: block !important;
  }
}

.d-sm-none {
  display: block !important;
}
@media only screen and (min-width: 560px) {
  .d-sm-none {
    display: none !important;
  }
}

.d-sm-block {
  display: none !important;
}
@media only screen and (min-width: 560px) {
  .d-sm-block {
    display: block !important;
  }
}

.d-md-none {
  display: block !important;
}
@media only screen and (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
}

.d-md-block {
  display: none !important;
}
@media only screen and (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
}

.d-lg-none {
  display: block !important;
}
@media only screen and (min-width: 960px) {
  .d-lg-none {
    display: none !important;
  }
}

.d-lg-block {
  display: none !important;
}
@media only screen and (min-width: 960px) {
  .d-lg-block {
    display: block !important;
  }
}

.d-xl-none {
  display: block !important;
}
@media only screen and (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
}

.d-xl-block {
  display: none !important;
}
@media only screen and (min-width: 1200px) {
  .d-xl-block {
    display: block !important;
  }
}

/* ==========================================================================
   センターボックス
   ========================================================================== */
.cb {
  max-width: 1000px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
}

.cb__inr {
  padding: 0 20px;
}

/* ==========================================================================
   モーダルウィンドウなど上に被せた場合、htmlタグにclassをつけることによって
   htmlのスクロールさせないようにする
   参考: https://qiita.com/ShintaroKoizumi/items/82107fe292f3847d634e
   ========================================================================== */
.scroll-prevent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.nowrap {
  white-space: nowrap;
}

html {
  font-size: 6.25%;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.header {
  height: 680px;
  position: relative;
  text-align: center;
  background-color: var(--theme-color-1);
}
.header__inr {
  width: 2000px;
  height: 680px;
  position: absolute;
  top: 0;
  left: calc(50% - 1000px);
}
@media only screen and (max-width: 999px) {
  .header {
    height: auto;
  }
  .header__inr {
    width: auto;
    height: auto;
    position: static;
  }
}

/* ==========================================================================
   ヘッドライン
   ========================================================================== */
.headline {
  min-height: 80px;
  padding: 5px 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  font-size: 30rem;
  color: var(--theme-color-1);
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.headline span {
  position: relative;
  z-index: 1;
}
.headline--red {
  background-color: var(--theme-color-7);
}
.headline--blue {
  background-color: var(--theme-color-8);
}
.headline--green {
  background-color: var(--theme-color-9);
}
.headline--brown {
  background-color: var(--theme-color-10);
}
.headline--emerald {
  background-color: var(--theme-color-11);
}
.headline--pink {
  background-color: var(--theme-color-6);
}
.headline--red-blue {
  background: url(../img/bg_head-red-blue.png) center top/cover no-repeat;
}
.headline--arrow-shadow {
  box-shadow: none;
  filter: drop-shadow(0px 10px 0px rgba(0, 0, 0, 0.1));
}
@media only screen and (max-width: 767px) {
  .headline {
    font-size: clamp(20rem, 10.458rem + 2.545vw, 30rem);
  }
}

.mark-arrow {
  position: relative;
}
.mark-arrow::before {
  content: "";
  width: 140px;
  height: 32px;
  display: block;
  position: absolute;
  left: calc(50% - 70px);
}
.mark-arrow--bottom::before {
  top: 100%;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.mark-arrow--red::before {
  background-color: var(--theme-color-7);
}
.mark-arrow--dark-blue::before {
  background-color: #1c5581;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.footer {
  background-color: #3d3d3d;
}
.footer__inr {
  padding: 50px;
}
.footer__logo {
  width: 200px;
}
.footer__name {
  margin-top: 50px;
  line-height: 1.65;
  color: #fff;
}
.footer__name span {
  font-weight: bold;
  font-size: 22px;
}
.footer__copyright {
  display: block;
  color: #fff;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .footer__inr {
    padding: 25px;
  }
  .footer__name {
    margin-top: 25px;
    font-size: 14rem;
  }
  .footer__name span {
    font-size: 18rem;
  }
  .footer__copyright {
    margin-top: 15px;
    font-size: 14rem;
  }
}

/* ==========================================================================
   ページ全体
   ========================================================================== */
.page {
  overflow: hidden;
  background-color: var(--theme-color-1);
}

/* ==========================================================================
   コンテンツ
   ========================================================================== */
/* ==========================================================================
   ボタンエリア
   ========================================================================== */
.box-btn {
  padding: 50px 4.2%;
}
.box-btn--pink-1 {
  background-color: var(--theme-color-4);
}
.box-btn--pink-2 {
  background-color: var(--theme-color-6);
}
@media only screen and (max-width: 767px) {
  .box-btn {
    padding: 35px 4.2%;
  }
}

.btn-contact {
  max-width: 675px;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .btn-contact {
    max-width: none;
    width: 100%;
    display: block;
  }
}

.btn {
  width: 100%;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.3;
  font-weight: bold;
  font-size: 24rem;
  text-align: center;
  background-color: var(--theme-color-1);
  border-radius: 100vh;
}
.btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active {
  color: var(--theme-color-5);
}
.btn i {
  margin-right: 0.5em;
}
.btn:hover, .btn:focus {
  text-decoration: none;
  opacity: 0.8;
}
@media only screen and (max-width: 767px) {
  .btn {
    font-size: 22rem;
  }
}

/* ==========================================================================
   各セクション
   ========================================================================== */
.box {
  position: relative;
  background: center 80px/cover no-repeat;
}
.box__body {
  padding: 50px 0;
}
@media only screen and (min-width: 1200px) {
  .box {
    background-size: cover;
  }
}
.box--issue {
  background-image: url(../img/bg_anchor-1.webp);
}
.box--issue .box__body {
  padding: 60px 2% 54px;
}
.box--doubt {
  background-image: url(../img/bg_anchor-2.webp);
}
.box--doubt .box__body {
  padding: 0 0 54px;
}
.box--about {
  background-image: url(../img/bg_anchor-3.webp);
}
.box--about .box__body {
  padding: 60px 2% 54px;
}
.box--skill {
  background-image: url(../img/bg_anchor-4.webp);
}
.box--skill .box__body {
  padding: 60px 2% 54px;
}
.box--visual .box__body {
  padding: 60px 2% 54px;
  background-color: #fff6e0;
}
.box--effect {
  background-image: url(../img/bg_anchor-5.webp);
}
.box--effect .box__body {
  padding: 20px 2% 14px;
}
.box--msg {
  background-image: url(../img/bg_anchor-6.webp);
}
.box--msg .box__body {
  padding: 60px 2% 54px;
}
.box--trial {
  background-image: url(../img/bg_anchor-7.webp);
}
.box--trial .box__body {
  padding: 0;
}
/* ==========================================================================
   イベント
   ========================================================================== */
.issue-flow {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.issue-flow-arrow {
  position: relative;
  margin-bottom: 90px;
}
.issue-flow-arrow::after {
  content: "";
  width: 42px;
  height: 30px;
  position: absolute;
  top: calc(100% + 30px);
  left: calc(50% - 21px);
  display: block;
  background-color: #ff7800;
  clip-path: polygon(50% 20%, 100% 0, 50% 100%, 0 0);
}

.issue-top {
  max-width: 796px;
  min-height: 158px;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  border: 2px solid #ff7800;
}
.issue-top__img {
  margin-left: -30px;
}

.issue-top-list {
  padding: 20px 0;
  display: grid;
  flex-grow: 1;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 8px;
  column-gap: 24px;
  font-weight: bold;
  font-size: 20rem;
}
.issue-top-list__item {
  padding-left: 1.2em;
  position: relative;
}
.issue-top-list__item i {
  color: #df0615;
  position: absolute;
  top: 0.3em;
  left: 0;
}
@media only screen and (max-width: 767px) {
  .issue-top-list {
    grid-template-columns: repeat(1, 1fr);
    font-size: 18rem;
  }
}

.issue-bottom__intro {
  font-size: 20rem;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}
.issue-bottom__head {
  font-size: 24rem;
  font-weight: bold;
  margin: 0 0 24px 0;
  color: #c0000e;
}
.issue-bottom__body {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.issue-bottom__summary {
  font-size: 18px;
  font-weight: bold;
  color: #c0000e;
  line-height: 1.6;
}
.issue-bottom__marker {
  background: linear-gradient(transparent 60%, #ffd200 60%);
  padding: 2px 4px;
}
@media only screen and (max-width: 767px) {
  .issue-bottom__head {
    text-align: center;
  }
  .issue-bottom__body {
    flex-direction: column;
  }
  .issue-bottom__img {
    text-align: center;
  }
  .issue-bottom__summary {
    text-align: center;
  }
}

.issue-bottom-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: bold;
  font-size: 20rem;
}
.issue-bottom-list__item i {
  color: #df0615;
}

/* ==========================================================================
   なぜアンガーマネジメントなのか？
   ========================================================================== */
.doubt-head {
  min-height: 256px;
  padding: 20px 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/doubt/bg_doubt.webp) center top/cover no-repeat;
}

.doubt-top {
  display: inline-flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 18rem;
  color: #fff;
}
.doubt-top strong {
  color: #fff000;
}
@media only screen and (max-width: 767px) {
  .doubt-top {
    flex-direction: column;
  }
}

.doubt-body {
  margin-top: 65px;
  padding: 0 2%;
  text-align: center;
}
.doubt-body__lead {
  font-weight: 500;
  font-size: 18rem;
}
.doubt-body__lead strong {
  color: #c0000e;
}
.doubt-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4%;
}
.doubt-list__item {
  position: relative;
}
.doubt-list__item:not(:last-child)::after {
  content: "";
  width: 20px;
  height: 30px;
  position: absolute;
  top: calc(50% - 15px);
  left: 103.5%;
  display: block;
  background-color: #ff7800;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%);
}
@media only screen and (max-width: 767px) {
  .doubt-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }
  .doubt-list__item:not(:last-child)::after {
    width: 30px;
    height: 20px;
    top: calc(100% + 10px);
    left: calc(50% - 15px);
    clip-path: polygon(50% 20%, 100% 0, 50% 100%, 0 0);
  }
}

.doubt-bottom {
  margin-top: 50px;
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: center;
}
.doubt-bottom__detail {
  width: 72%;
  text-align: left;
}
.doubt-bottom__img {
  width: 28%;
}
@media only screen and (max-width: 767px) {
  .doubt-bottom {
    flex-direction: column;
  }
  .doubt-bottom__detail {
    width: 100%;
  }
  .doubt-bottom__img {
    width: 100%;
  }
}

/* ==========================================================================
   『アンガー×アンカー』とは？
   ========================================================================== */
.about-top {
  text-align: center;
}
.about-top__lead {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 20rem;
}
.about-top__lead strong {
  color: #c0000e;
}
.about-top__img {
  width: calc(100% + 28px);
  margin-left: -14px;
}
@media only screen and (max-width: 1027px) {
  .about-top {
    width: 100%;
    margin-left: 0;
  }
}

.about-middle {
  margin-top: 50px;
  display: flex;
  gap: 30px;
  margin-bottom: 50px;
}
.about-middle__img {
  width: 60%;
}
.about-middle__detail {
  width: 40%;
}
.about-middle__text {
  line-height: 1.55;
  font-weight: 500;
  font-size: 18rem;
}
@media only screen and (max-width: 767px) {
  .about-middle {
    flex-direction: column;
    align-items: center;
  }
  .about-middle__img {
    width: 80%;
  }
  .about-middle__detail {
    width: 80%;
  }
}

.event-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.event-list img {
  width: 100%;
  height: auto;
  display: block;
}

.about-bottom {
  border: 2px solid #f39c12;
  border-radius: 8px;
  margin-top: 70px;
}
.about-bottom__title {
  position: relative;
  background-color: #e67e22;
  color: #ffffff;
  padding: 12px 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.about-bottom__title::before {
  content: "";
  width: 86px;
  aspect-ratio: 1/1.07;
  display: block;
  position: absolute;
  left: 245px;
  bottom: 0;
  background: url(../img/about/img_about-1.webp) 0 0/cover no-repeat;
}
.about-bottom__body {
  padding: 20px 2% 40px;
  text-align: center;
  background-color: #fff;
}
.about-bottom__lead {
  line-height: 1.55;
  font-size: 18rem;
  font-weight: bold;
}
.about-bottom__lead strong {
  color: #c0000e;
}
@media only screen and (max-width: 767px) {
  .about-bottom__title::before {
    width: 66px;
    left: 15px;
  }
}

.about-bottom-grid {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.about-bottom-grid__detail {
  line-height: 1.55;
  font-weight: 500;
  font-size: 18rem;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .about-bottom-grid {
    flex-direction: column;
    align-items: center;
  }
}

.check-list {
  margin: 8px 0;
}
.check-list__item {
  padding-left: 1.2em;
  position: relative;
}
.check-list__item i {
  color: #df0615;
  position: absolute;
  top: 0.3em;
  left: 0;
}

/* ==========================================================================
   ゲームで学べる5つのスキル
   ========================================================================== */
.skill-list {
  counter-reset: listnum;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 2.6%;
  row-gap: 30px;
}
.skill-card {
  min-width: 316px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 10px 0px 0px rgba(10, 0, 0, 0.4);
}
.skill-card__title {
  min-height: 70px;
  padding: 3px 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.3;
  font-weight: 900;
  font-size: 22rem;
  color: #fff;
  text-align: center;
}
.skill-card__title::before {
  counter-increment: listnum;
  /* counter-resetと同じ文字列 */
  content: counter(listnum);
  /* カウントした数に応じて番号を表示 */
  width: 40px;
  aspect-ratio: 1;
  position: absolute;
  top: calc(50% - 20px);
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 28rem;
  text-align: center;
  background-color: #fff;
  border-radius: 100vh;
}
.skill-card--1 .skill-card__title {
  background-color: #f97500;
}
.skill-card--1 .skill-card__title::before {
  color: #f97500;
}
.skill-card--2 .skill-card__title {
  background-color: #cd9600;
}
.skill-card--2 .skill-card__title::before {
  color: #cd9600;
}
.skill-card--3 .skill-card__title {
  background-color: #72a200;
}
.skill-card--3 .skill-card__title::before {
  color: #72a200;
}
.skill-card--4 .skill-card__title {
  background-color: #239e71;
}
.skill-card--4 .skill-card__title::before {
  color: #239e71;
}
.skill-card--5 .skill-card__title {
  background-color: #23979e;
}
.skill-card--5 .skill-card__title::before {
  color: #23979e;
}
.skill-card__body {
  min-height: 190px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  line-height: 1.3;
  text-align: center;
  background-color: #fff;
}

/* ==========================================================================
   自律神経の見える化
   ========================================================================== */
.visual-top {
  text-align: center;
}
.visual-top__lead {
  font-weight: bold;
  font-size: 20rem;
}
.visual-top__lead strong {
  color: #c0000e;
}

.cocololo-list {
  max-width: 800px;
  margin: 40px auto 40px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  gap: 10px;
}
.cocololo-list__item {
  display: flex;
  align-items: center;
  aspect-ratio: 1;
  max-width: 220px;
}
@media only screen and (max-width: 767px) {
  .cocololo-list {
    grid-template-columns: repeat(2, 1fr);
    max-width: 400px;
  }
}

/* ==========================================================================
   自律神経の見える化
   ========================================================================== */
.effect-type {
  margin: 40px 0;
  text-align: center;
}
.effect-type__title {
  min-width: 178px;
  padding: 0 25px;
  height: 48px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 6px;
  font-size: 20rem;
  font-weight: bold;
}
.effect-type__title::after {
  content: "";
  width: 14px;
  height: 12px;
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-color: #fff;
}
.effect-type__title--individual {
  color: #f26819;
}
.effect-type__title--organization {
  color: #0093d8;
}
.effect-type__title--company {
  color: #094;
}

.effect-list {
  display: grid;
  gap: 20px;
  margin: 30px auto 0;
  justify-content: center;
}
.effect-list--4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 796px;
}
.effect-list--5 {
  grid-template-columns: repeat(5, 1fr);
  max-width: 1006px;
}
@media only screen and (max-width: 767px) {
  .effect-list--4, .effect-list--5 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 388px;
  }
  .effect-list--5 li:nth-child(5) {
    grid-column: span 2;
    display: flex;
    justify-content: center;
  }
}

/* ==========================================================================
   科学的アプローチ／開発者メッセージ
   ========================================================================== */
.msg-top__lead {
  font-weight: bold;
  font-size: 18rem;
}
.msg-top__lead strong {
  color: #c0000e;
}

.msg-middle {
  margin-top: 40px;
}

.msg-panel {
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
}
.msg-panel__title {
  min-height: 46px;
  padding: 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  background-color: #009a98;
}
.msg-panel__body {
  padding: 30px 40px;
}
.msg-panel:not(:first-child) {
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .msg-panel__body {
    padding: 25px 20px;
  }
}

.box-profile {
  display: flex;
  gap: 18px;
}
.box-profile__img {
  flex: 0 0 220px;
}
.box-profile__detail {
  flex: 1;
}
.box-profile__name {
  font-size: 18rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.box-profile__title {
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 15px;
}
.box-profile__desc {
  text-align: justify;
}
@media only screen and (max-width: 767px) {
  .box-profile {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
  }
  .box-profile__img {
    flex: 0 0 auto;
    width: 180px;
  }
  .box-profile .profile-desc {
    text-align: left;
  }
}

.separator {
  height: 1px;
  background-color: #009a98;
  margin: 40px 0;
  border: none;
}

/* ==========================================================================
   まずは体験してください！
   ========================================================================== */
.trial-top {
  min-height: 474px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.trial-top__lead {
  font-weight: bold;
  font-size: 20rem;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .trial-top {
    min-height: 374px;
  }
  .trial-top__lead {
    font-size: 16rem;
  }
}

/*!
style.css Modified: @@buildTime Editor: Toshiyuki Hara */
/*# sourceMappingURL=style.css.map */