@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;

400;600;700&display=swap);@charset "UTF-8";

/* -----------------------
メディアクエリ
@include media(pc) {} //1024px以上
@include media(tb) {} //1024 - 768
@include media(tbsp) {} //768-360
@include media(sp) {} // 360以下
-----------------------*/

/* -----------------------

flex基本設定
 @include flex(space-between,center);

-----------------------*/

/* -----------------------

blogのindexなどのリスト組。ulなどwrapper要素ににつける
 @include list(3,2rem);

-----------------------*/

/* -----------------------

fontサイズを設定する (weightやfamilyは端折らず記載する)
@include font(pow(0) + rem, 700, 0.04em, 1.8, $jp_go);

-----------------------*/

/* -----------------------
べき乗の計算をする
-----------------------*/

/* -----------------------

icon画像を設定する
@include icon(150px, 12px, "../img/common/logo");

-----------------------*/

/* -----------------------

背景画像を設定する
@include img-cover("../img/_dummy/1.jpg");

-----------------------*/

/* -----------------------

画像など画角を設定する
@include ratio(66.6%);

-----------------------*/

/* -----------------------

cleafix
@include clearfix;

-----------------------*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
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,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
menu,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background-color: transparent;
}

article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* --------------------------------------------
Setting Color - カラー設定
color(1,)で色指定
--------------------------------------------*/

/* --------------------------------------------
Setting Font - フォント設定
--------------------------------------------*/

/* --------------------------------------------
Setting Content - コンテンツ設定
@extend .common_width
--------------------------------------------*/

.common_width,
.l-footer .wrap,
.p-sec,
.section_wrap,
.block_ttl {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 1024px) {
  .common_width,
  .l-footer .wrap,
  .p-sec,
  .section_wrap,
  .block_ttl {
    width: 86%;
  }
}

@media only screen and (max-width: 768px) {
  .common_width,
  .l-footer .wrap,
  .p-sec,
  .section_wrap,
  .block_ttl {
    width: 90%;
  }
}

/* --------------------------------------------
Setting Margin - マージン設定
--------------------------------------------*/

.mb_xl {
  margin-bottom: 5rem;
  display: block;
}

@media only screen and (max-width: 768px) {
  .mb_xl {
    margin-bottom: 5rem;
  }
}

.mb_l {
  margin-bottom: 4rem;
}

@media only screen and (max-width: 768px) {
  .mb_l {
    margin-bottom: 4rem;
  }
}

.mb_m {
  margin-bottom: 3rem;
}

@media only screen and (max-width: 768px) {
  .mb_m {
    margin-bottom: 3rem;
  }
}

.mb_s,
.p-news__article .main > *,
.p-blog__article .body > * {
  margin-bottom: 2rem;
}

@media only screen and (max-width: 768px) {
  .mb_s,
  .p-news__article .main > *,
  .p-blog__article .body > * {
    margin-bottom: 2rem;
  }
}

.mb_xs {
  margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {
  .mb_xs {
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------
Basic & Module（触らない）
--------------------------------------------*/

body,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
input,
textarea,
option,
div,
p,
dt,
dd,
li,
address {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #333;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: auto;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  font-family: ryo-gothic-plusn, sans-serif;
  font-size: 14px;
  -ms-overflow-style: none;
  /* IE10+ */
}

@media only screen and (max-width: 1024px) {
  html {
    font-size: 13px;
  }
}

@media only screen and (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

html::-webkit-scrollbar {
  display: none;
}

body {
  width: 100%;
  z-index: 0;
  height: auto;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}

body.ready * {
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
}

#wrapAll {
  width: 100%;
  position: relative;
  overflow: hidden;
}

#wrapAll main {
  width: 100%;
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-feature-settings: "palt" 1;
  box-sizing: border-box;
}

::-moz-selection {
  color: #333;
  background: #c2d0e7;
  text-decoration: underline;
}

::selection {
  color: #333;
  background: #c2d0e7;
  text-decoration: underline;
}

::-moz-selection {
  color: #333;
  background: #c2d0e7;
}

img {
  display: block;
  width: 100%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

span,
i {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

a {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  color: #333;
}

a:visited {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #333;
  text-decoration: none;
}

select,
input,
textarea,
button {
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
  border-radius: 0;
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

textarea {
  resize: vertical;
  overflow: auto;
}

input + label {
  cursor: pointer;
}

.show_pc {
  display: block;
}

@media only screen and (max-width: 1024px) {
  .show_pc {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .show_pc {
    display: none;
  }
}

.show_pctb {
  display: block;
}

@media only screen and (max-width: 1024px) {
  .show_pctb {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .show_pctb {
    display: none;
  }
}

.show_tbsp {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .show_tbsp {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .show_tbsp {
    display: block;
  }
}

.show_tb {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .show_tb {
    display: block;
  }
}

@media only screen and (max-width: 480px) {
  .show_tb {
    display: none;
  }
}

.show_sp {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .show_sp {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .show_sp {
    display: block;
  }
}

.sitemap a {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.sitemap a span {
  min-width: 100px;
  text-align: center;
  display: inline-block;
  border: 1px solid #eee;
  padding: 0.5rem 1rem;
}

.sitemap div {
  margin-left: 2rem;
}

/* -----------------------
parts.scss
.p-xxxxxというクラスをつける。
--------------------------

[CSS Layout]
SECTION         :セクションのwidth
ICON            :アイコンのサイズ
BUTTON          :ボタンのスタイルとサイズ
TEXTLINK        :テキストリンクのスタイル
TITLE           :ページタイトル・セクションタイトル
IMG_RATIO       :背景画像の画角設定
PANKUZU         :パンクズ
CAPTION_LIST    :注意書きのリスト
FORM            :フォーム
PRIVACY         :プライバシーポリシー
FAQ             :FAQ
COMPANY_TABLE   :会社概要の表組
PAGER           :ページャー(番号リスト/次へ前へ)
BLOG            :ブログレイアウト(INDEX / ARITCLE)
SNSSHARE        :SNSシェアボタン
NEWS            :ニュースレイアウト
2COL            :2カラムのwrap
LAYOUT          :レイアウトパターン

[JS Layout]
SLIDE                :スライドショー
ACCORDION            :アコーディオン
HAMBERGER            :ハンバーガーボタン
MODAL                :モーダル
MODAL PHOTO GALLERY  :フォトギャラリー
SCROLL ACTION        :スクロールアクション
MASONRY              :メイソンリー

-------------------------*/

/* -----------------------
	CSS Layout
-------------------------*/

@page {
  size: A4;
  margin: 0 portrait;
}

@media print {
  html {
    background-color: #eee;
  }
}

@media print {
  body {
    width: 210mm;
  }

  body header,
  body footer {
    display: none;
  }

  body main,
  body .l-main {
    background: transparent;
    margin: 0;
    padding: 0;
  }

  body main .p-ttl,
  body .l-main .p-ttl {
    display: none;
  }
}

.l-main {
  padding-top: 60px;
}

@media only screen and (max-width: 768px) {
  .l-main {
    padding-left: 0;
  }
}

.l-main.login {
  height: 100vh;
  padding-left: 0;
  position: relative;
}

.p-nav {
  margin-bottom: 3rem;
}

.p-nav a {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 2;
  display: block;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 4px;
  transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .p-nav a:hover {
    background-color: #a4b6d3;
    color: #fff;
  }
}

.p-nav .listwrap {
  overflow-y: scroll;
  height: 200px;
  border: 1px solid #eee;
}

.p-nav .listwrap ul {
  width: calc(100% + 2rem);
  height: 100%;
}

.p-nav .listwrap li {
  padding-right: 2rem;
}

.p-nav .listwrap li + li {
  margin-top: 0.5rem;
}

.p-nav .pomo {
  margin-bottom: 1rem;
  background-color: #fff;
  border-radius: 0.5rem;
  padding-top: 1rem;
}

.p-nav .pomo ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 2rem);
  margin-left: -1rem;
  text-align: center;
}

.p-nav .pomo ul > * {
  width: 50%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-nav .pomo ul li {
  padding: 0 1rem 1rem;
}

.p-nav .pomo .num {
  font-size: 2.0736rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-nav .money .num {
  text-align: right;
  font-size: 1.44rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-nav .money .num .unit {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-nav .money a {
  display: table;
  width: 100%;
}

.p-nav .money a > * {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}

.p-nav .money li + li {
  margin-top: 0.5rem;
}

.p-nav .schedule dl {
  display: table;
  width: 100%;
}

.p-nav .schedule dl > * {
  display: table-cell;
  vertical-align: middle;
}

.p-nav .schedule dt {
  width: 8rem;
}

.p-nav .schedule .date {
  width: 6rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-box {
  background-color: #eaf0f8;
  padding: 2rem;
  border-radius: 0.5rem;
}

.p-smalltxt {
  color: #a4b6d3;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-print {
  width: 210mm;
  height: 296mm;
  page-break-after: always;
  padding: 0;
  position: relative;
  padding: 10mm;
}

@media screen {
  .p-print {
    margin: 5rem auto;
    box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3);
  }
}

@media screen {
  .p-print_sec {
    padding-left: calc(5rem + 10vw);
    padding-right: 10vw;
  }
}

.p-print .line {
  position: absolute;
  top: 0;
  left: 5mm;
  height: calc(100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: space-between;
  width: 100%;
  flex-direction: column;
}

.p-print .line li {
  width: 3mm;
  height: 1px;
  display: block;
  border-top: 1px solid #eee;
}

.p-print .line li:first-child,
.p-print .line li:last-child {
  border-top: 1px solid transparent;
}

.p-print .mado {
  width: 91mm;
  height: 45mm;
  padding: 3mm;
  margin-bottom: 54mm;
  margin-top: 2mm;
  margin-left: 13mm;
  position: relative;
}

.p-print .mado p {
  font-size: 6pt;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: #000;
}

.p-print .mado .tag {
  position: absolute;
  right: 3mm;
  bottom: 3mm;
  border: 1px solid #000;
  padding: 0.3em 1em;
}

/* --------------------------------------------
Setting Btn Icon Link
--------------------------------------------*/

.p-icon {
  display: inline-block;
  vertical-align: middle;
  fill: #333;
  width: 2rem;
  height: 2rem;
}

.p-icon.stroke {
  stroke-width: 1;
  stroke-width: 2.2857142857px;
}

.p-icon + span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
}

.p-icon.l {
  width: 3rem;
  height: 3rem;
}

.p-icon.l.stroke {
  stroke-width: 1.5;
}

.p-icon.s {
  width: 1.5rem;
  height: 1.5rem;
}

.p-icon.s.stroke {
  stroke-width: 2;
}

.p-icon.tick {
  width: 12px;
  height: 12px;
}

.p-icon.tick.stroke {
  stroke-width: 2;
  stroke-width: 5.3333333333px;
}

.p-icon.stroke {
  stroke: #333;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.p-icon.w {
  fill: #fff;
}

.p-icon.w.stroke {
  fill: none;
  stroke: #fff;
}

.p-icon.c1 {
  fill: #45746c;
}

.p-icon.c1.stroke {
  fill: none;
  stroke: #45746c;
}

.p-icon.c2 {
  fill: #edb132;
}

.p-icon.c2.stroke {
  fill: none;
  stroke: #edb132;
}

.p-icon.c3 {
  fill: #f46f60;
}

.p-icon.c3.stroke {
  fill: none;
  stroke: #f46f60;
}

.p-icon.c4 {
  fill: #eaf0f8;
}

.p-icon.c4.stroke {
  fill: none;
  stroke: #eaf0f8;
}

.p-icon.c5 {
  fill: #dee8f4;
}

.p-icon.c5.stroke {
  fill: none;
  stroke: #dee8f4;
}

.p-icon.c6 {
  fill: #a4b6d3;
}

.p-icon.c6.stroke {
  fill: none;
  stroke: #a4b6d3;
}

.p-icon.g1 {
  fill: #333;
}

.p-icon.g1.stroke {
  fill: none;
  stroke: #333;
}

.p-icon.g2 {
  fill: #707070;
}

.p-icon.g2.stroke {
  fill: none;
  stroke: #707070;
}

.p-icon.g3 {
  fill: #aaa;
}

.p-icon.g3.stroke {
  fill: none;
  stroke: #aaa;
}

.p-icon.g4 {
  fill: #c2d0e7;
}

.p-icon.g4.stroke {
  fill: none;
  stroke: #c2d0e7;
}

.p-icon.g5 {
  fill: #eee;
}

.p-icon.g5.stroke {
  fill: none;
  stroke: #eee;
}

.p-icon.g6 {
  fill: #f2f5fa;
}

.p-icon.g6.stroke {
  fill: none;
  stroke: #f2f5fa;
}

.p-icon.g7 {
  fill: #fff;
}

.p-icon.g7.stroke {
  fill: none;
  stroke: #fff;
}

.p-btn {
  display: block;
  cursor: pointer;
  text-align: center;
  transition: background-color 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-btn svg {
  width: 1.3em;
  height: 1.3em;
  transition: fill 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-btn.l {
  font-size: 1.44rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  line-height: calc(4rem - 2px);
  height: 4rem;
  padding: 0rem 2rem;
}

.p-btn.m {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  line-height: calc(3rem - 2px);
  height: 3rem;
  padding: 0rem 1rem;
  border-radius: 4px;
}

.p-btn.s {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  line-height: calc(2rem - 2px);
  height: 2rem;
  padding: 0rem 1rem;
}

.p-btn.icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
  border-radius: 4px;
}

.p-btn.w {
  border: 1px solid #f2f5fa;
  background-color: #f2f5fa;
  color: #aaa;
}

.p-btn.w svg {
  fill: #aaa;
}

@media only screen and (min-width: 1024px) {
  .p-btn.w:hover {
    background-color: #f2f5fa;
  }
}

.p-btn.wr {
  border: 1px solid #c2d0e7;
  background-color: #fff;
  color: #333;
}

.p-btn.wr svg {
  fill: #333;
}

@media only screen and (min-width: 1024px) {
  .p-btn.wr:hover {
    background-color: #333;
    color: #fff;
  }
}

.p-btn.c1 {
  border: 1px solid #45746c;
  background-color: #45746c;
  color: #fff;
}

.p-btn.c1 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c1:hover {
    background-color: #fff;
    color: #45746c;
  }

  .p-btn.c1:hover svg {
    fill: #45746c;
  }
}

.p-btn.c1r {
  border: 1px solid #45746c;
  background-color: #fff;
  color: #45746c;
}

.p-btn.c1r svg {
  fill: #6a9089;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c1r:hover {
    background-color: #6a9089;
    color: #fff;
  }

  .p-btn.c1r:hover svg {
    fill: #fff;
  }
}

.p-btn.c2 {
  border: 1px solid #edb132;
  background-color: #edb132;
  color: #fff;
}

.p-btn.c2 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c2:hover {
    background-color: #fff;
    color: #edb132;
  }

  .p-btn.c2:hover svg {
    fill: #edb132;
  }
}

.p-btn.c2r {
  border: 1px solid #edb132;
  background-color: #fff;
  color: #edb132;
}

.p-btn.c2r svg {
  fill: #f1c15b;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c2r:hover {
    background-color: #f1c15b;
    color: #fff;
  }

  .p-btn.c2r:hover svg {
    fill: #fff;
  }
}

.p-btn.c3 {
  border: 1px solid #f46f60;
  background-color: #f46f60;
  color: #fff;
}

.p-btn.c3 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c3:hover {
    background-color: #fff;
    color: #f46f60;
  }

  .p-btn.c3:hover svg {
    fill: #f46f60;
  }
}

.p-btn.c3r {
  border: 1px solid #f46f60;
  background-color: #fff;
  color: #f46f60;
}

.p-btn.c3r svg {
  fill: #f68c80;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c3r:hover {
    background-color: #f68c80;
    color: #fff;
  }

  .p-btn.c3r:hover svg {
    fill: #fff;
  }
}

.p-btn.c4 {
  border: 1px solid #eaf0f8;
  background-color: #eaf0f8;
  color: #fff;
}

.p-btn.c4 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c4:hover {
    background-color: #fff;
    color: #eaf0f8;
  }

  .p-btn.c4:hover svg {
    fill: #eaf0f8;
  }
}

.p-btn.c4r {
  border: 1px solid #eaf0f8;
  background-color: #fff;
  color: #eaf0f8;
}

.p-btn.c4r svg {
  fill: #eef3f9;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c4r:hover {
    background-color: #eef3f9;
    color: #fff;
  }

  .p-btn.c4r:hover svg {
    fill: #fff;
  }
}

.p-btn.c5 {
  border: 1px solid #dee8f4;
  background-color: #dee8f4;
  color: #fff;
}

.p-btn.c5 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c5:hover {
    background-color: #fff;
    color: #dee8f4;
  }

  .p-btn.c5:hover svg {
    fill: #dee8f4;
  }
}

.p-btn.c5r {
  border: 1px solid #dee8f4;
  background-color: #fff;
  color: #dee8f4;
}

.p-btn.c5r svg {
  fill: #e5edf6;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c5r:hover {
    background-color: #e5edf6;
    color: #fff;
  }

  .p-btn.c5r:hover svg {
    fill: #fff;
  }
}

.p-btn.c6 {
  border: 1px solid #a4b6d3;
  background-color: #a4b6d3;
  color: #fff;
}

.p-btn.c6 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c6:hover {
    background-color: #fff;
    color: #a4b6d3;
  }

  .p-btn.c6:hover svg {
    fill: #a4b6d3;
  }
}

.p-btn.c6r {
  border: 1px solid #a4b6d3;
  background-color: #fff;
  color: #a4b6d3;
}

.p-btn.c6r svg {
  fill: #b6c5dc;
}

@media only screen and (min-width: 1024px) {
  .p-btn.c6r:hover {
    background-color: #b6c5dc;
    color: #fff;
  }

  .p-btn.c6r:hover svg {
    fill: #fff;
  }
}

.p-btn.g1 {
  border: 1px solid #333;
  background-color: #333;
  color: #fff;
}

.p-btn.g1 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g1:hover {
    background-color: #fff;
    color: #333;
  }

  .p-btn.g1:hover svg {
    fill: #333;
  }
}

.p-btn.g1r {
  border: 1px solid #333;
  background-color: #fff;
  color: #333;
}

.p-btn.g1r svg {
  fill: #333;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g1r:hover {
    background-color: #333;
    color: #fff;
  }

  .p-btn.g1r:hover svg {
    fill: #fff;
  }
}

.p-btn.g2 {
  border: 1px solid #707070;
  background-color: #707070;
  color: #fff;
}

.p-btn.g2 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g2:hover {
    background-color: #fff;
    color: #707070;
  }

  .p-btn.g2:hover svg {
    fill: #707070;
  }
}

.p-btn.g2r {
  border: 1px solid #707070;
  background-color: #fff;
  color: #707070;
}

.p-btn.g2r svg {
  fill: #707070;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g2r:hover {
    background-color: #707070;
    color: #fff;
  }

  .p-btn.g2r:hover svg {
    fill: #fff;
  }
}

.p-btn.g3 {
  border: 1px solid #aaa;
  background-color: #aaa;
  color: #fff;
}

.p-btn.g3 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g3:hover {
    background-color: #fff;
    color: #aaa;
  }

  .p-btn.g3:hover svg {
    fill: #aaa;
  }
}

.p-btn.g3r {
  border: 1px solid #aaa;
  background-color: #fff;
  color: #aaa;
}

.p-btn.g3r svg {
  fill: #aaa;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g3r:hover {
    background-color: #aaa;
    color: #fff;
  }

  .p-btn.g3r:hover svg {
    fill: #fff;
  }
}

.p-btn.g4 {
  border: 1px solid #c2d0e7;
  background-color: #c2d0e7;
  color: #fff;
}

.p-btn.g4 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g4:hover {
    background-color: #fff;
    color: #c2d0e7;
  }

  .p-btn.g4:hover svg {
    fill: #c2d0e7;
  }
}

.p-btn.g4r {
  border: 1px solid #c2d0e7;
  background-color: #fff;
  color: #c2d0e7;
}

.p-btn.g4r svg {
  fill: #c2d0e7;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g4r:hover {
    background-color: #c2d0e7;
    color: #fff;
  }

  .p-btn.g4r:hover svg {
    fill: #fff;
  }
}

.p-btn.g5 {
  border: 1px solid #eee;
  background-color: #eee;
  color: #fff;
}

.p-btn.g5 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g5:hover {
    background-color: #fff;
    color: #eee;
  }

  .p-btn.g5:hover svg {
    fill: #eee;
  }
}

.p-btn.g5r {
  border: 1px solid #eee;
  background-color: #fff;
  color: #eee;
}

.p-btn.g5r svg {
  fill: #eee;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g5r:hover {
    background-color: #eee;
    color: #fff;
  }

  .p-btn.g5r:hover svg {
    fill: #fff;
  }
}

.p-btn.g6 {
  border: 1px solid #f2f5fa;
  background-color: #f2f5fa;
  color: #fff;
}

.p-btn.g6 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g6:hover {
    background-color: #fff;
    color: #f2f5fa;
  }

  .p-btn.g6:hover svg {
    fill: #f2f5fa;
  }
}

.p-btn.g6r {
  border: 1px solid #f2f5fa;
  background-color: #fff;
  color: #f2f5fa;
}

.p-btn.g6r svg {
  fill: #f2f5fa;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g6r:hover {
    background-color: #f2f5fa;
    color: #fff;
  }

  .p-btn.g6r:hover svg {
    fill: #fff;
  }
}

.p-btn.g7 {
  border: 1px solid #fff;
  background-color: #fff;
  color: #fff;
}

.p-btn.g7 svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g7:hover {
    background-color: #fff;
    color: #fff;
  }

  .p-btn.g7:hover svg {
    fill: #fff;
  }
}

.p-btn.g7r {
  border: 1px solid #fff;
  background-color: #fff;
  color: #fff;
}

.p-btn.g7r svg {
  fill: #fff;
}

@media only screen and (min-width: 1024px) {
  .p-btn.g7r:hover {
    background-color: #fff;
    color: #fff;
  }

  .p-btn.g7r:hover svg {
    fill: #fff;
  }
}

.p-btnwrap.c {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media only screen and (max-width: 1024px) {
  .p-btnwrap.c {
    flex-direction: column-reverse;
  }
}

.p-btnwrap.c > * {
  margin: 0 0.5rem;
  flex: 1;
}

@media only screen and (max-width: 1024px) {
  .p-btnwrap.c > * + * {
    margin-bottom: 0.5rem;
  }
}

.p-link {
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  font-family: inherit;
}

@media only screen and (min-width: 1024px) {
  .p-link:hover span {
    background: none;
  }
}

.p-link span {
  background: linear-gradient(transparent 95%, #45746c 0%);
  display: inline;
  transition: background 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, visibility 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-link.c1 span {
  color: #45746c;
  background: linear-gradient(transparent 95%, #45746c 0%);
}

@media only screen and (min-width: 1024px) {
  .p-link.c1:hover span {
    background: none;
  }
}

.p-link.c2 span {
  color: #edb132;
  background: linear-gradient(transparent 95%, #edb132 0%);
}

@media only screen and (min-width: 1024px) {
  .p-link.c2:hover span {
    background: none;
  }
}

.p-link.c3 span {
  color: #f46f60;
  background: linear-gradient(transparent 95%, #f46f60 0%);
}

@media only screen and (min-width: 1024px) {
  .p-link.c3:hover span {
    background: none;
  }
}

.p-link.c4 span {
  color: #eaf0f8;
  background: linear-gradient(transparent 95%, #eaf0f8 0%);
}

@media only screen and (min-width: 1024px) {
  .p-link.c4:hover span {
    background: none;
  }
}

.p-link.c5 span {
  color: #dee8f4;
  background: linear-gradient(transparent 95%, #dee8f4 0%);
}

@media only screen and (min-width: 1024px) {
  .p-link.c5:hover span {
    background: none;
  }
}

.p-link.c6 span {
  color: #a4b6d3;
  background: linear-gradient(transparent 95%, #a4b6d3 0%);
}

@media only screen and (min-width: 1024px) {
  .p-link.c6:hover span {
    background: none;
  }
}

.p-linkwrap.c {
  text-align: center;
}

.p-ttl {
  position: relative;
}

.p-ttl .g {
  color: #edb132;
}

.p-ttl .sub {
  position: absolute;
  right: 0;
  top: 50%;
  transform-origin: center center;
  transform: translate3d(0%, -50%, 0) rotate(0deg) scale(1, 1);
}

.p-ttl.c .ttl,
.p-ttl.c .subttl,
.p-ttl.c .lead {
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .p-ttl.c .lead {
    text-align: left;
  }
}

.p-ttl.page {
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.p-ttl.page::before {
  content: "";
  display: block;
  width: 5rem;
  height: 2px;
  background-color: #edb132;
  position: absolute;
  left: 0;
  bottom: 0;
}

.p-ttl.page .ttl {
  font-size: 1.728rem;
  font-weight: normal;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  text-transform: uppercase;
}

.p-ttl.page .subttl {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #333;
  display: block;
  margin-top: 0.5rem;
}

.p-ttl.sec {
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.p-ttl.sec::before {
  content: "";
  display: block;
  width: 5rem;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 0;
  bottom: 0;
}

.p-ttl.sec .ttl {
  font-size: 1.44rem;
  font-weight: normal;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  text-transform: uppercase;
}

.p-ttl.sec .subttl {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
}

.p-ttl.box {
  margin-bottom: 1rem;
}

.p-ttl.box .ttl {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  text-transform: uppercase;
}

.p-ttl.form {
  margin-bottom: 1rem;
}

.p-ttl.form .ttl {
  font-size: 1.44rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  text-transform: uppercase;
}

.p-img {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url("");
}

.p-img::before {
  content: "";
}

.p-img.link {
  position: relative;
}

.p-img.link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-img.link span {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1, 1);
  opacity: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  font-family: "Times New Roman", "Georgia", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif, serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
  transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-img.link span:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 0%;
  bottom: 0;
  left: 50%;
  transform-origin: center center;
  transform: translate3d(-50%, 0%, 0) rotate(0deg) scale(1, 1);
  background-color: rgba(255, 255, 255, 0.6);
  transition: width 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms;
}

@media only screen and (min-width: 1024px) {
  .p-img.link:hover::after {
    opacity: 1;
  }

  .p-img.link:hover span {
    opacity: 1;
  }

  .p-img.link:hover span::before {
    width: 100%;
  }
}

.p-img.r150::before {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 150%;
}

.p-img.r120::before {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 120%;
}

.p-img.r100::before {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 100%;
}

.p-img.r75::before {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 75%;
}

.p-img.r66::before {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 66%;
}

.p-img.r50::before {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 50%;
}

.p-img.r33::before {
  position: relative;
  width: 100%;
  display: block;
  padding-top: 33%;
}

.p-pankuzu {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.p-pankuzu li + li {
  position: relative;
  padding-left: 2rem;
}

.p-pankuzu li + li::before,
.p-pankuzu li + li::after {
  content: "";
  width: 0.4rem;
  background-color: #fff;
  height: 1px;
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform-origin: center right;
}

.p-pankuzu li + li::before {
  transform: rotate(45deg);
}

.p-pankuzu li + li::after {
  transform: rotate(-45deg);
}

.p-pankuzu p,
.p-pankuzu a {
  font-size: 1rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.p-cap {
  margin-top: 2rem;
}

.p-cap li {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: "san-serif";
  letter-spacing: 0.06em;
  line-height: 1.75;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.p-cap li a {
  font-size: 0.9rem;
  font-weight: 500;
  font-family: "san-serif";
  letter-spacing: 0.1em;
  line-height: 1;
  color: #f46f60;
}

.p-cap li::before {
  content: "\203B";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: "san-serif";
  letter-spacing: 0.1em;
  line-height: 1.75;
}

.p-form select,
.p-form input:not([type=submit]),
.p-form textarea {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  border: 1px solid transparent;
  background-color: #f2f5fa;
  line-height: 2.8rem;
  height: 2.8rem;
  padding: 0rem 1rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.p-form input {
  width: 100%;
  display: inline-block;
}

.p-form input.w12 {
  width: 12rem;
}

.p-form input.w6 {
  width: 6rem;
}

.p-form input.w50 {
  width: 50%;
}

.p-form input + input {
  margin-top: 0.5rem;
}

.p-form input:not([type=submit]):-moz-read-only {
  background-color: #eee;
}

.p-form input:not([type=submit]):read-only {
  background-color: #eee;
}

.p-form textarea {
  width: 100%;
  display: inline-block;
  line-height: 1.8;
  padding: 1rem 1rem;
  height: 14rem;
}

.p-form textarea:-moz-read-only {
  background-color: #eee;
}

.p-form textarea:read-only {
  background-color: #eee;
}

.p-form .p-select {
  position: relative;
}

.p-form .p-select::before {
  content: "";
  width: 6px;
  height: 6px;
  border-left: 1px solid #333;
  border-bottom: 1px solid #333;
  display: block;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform-origin: center;
  transform: translate3d(0, -50%, 0) rotate(-45deg);
}

.p-form .p-select select {
  text-indent: 0.01px;
  text-overflow: "";
  vertical-align: middle;
  width: 100%;
}

.p-form .p-select select::-ms-expand {
  display: none;
}

.p-form .p-select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #828c9a;
}

.p-form .p-radio label {
  display: inline-block;
  margin-right: 2.5rem;
  padding-left: 2.3rem;
  position: relative;
  line-height: 3;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  cursor: pointer;
}

.p-form .p-radio label.v {
  display: block;
}

.p-form .p-radio label input {
  display: none;
}

.p-form .p-radio label input + span::before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 0;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background-color: #f2f5fa;
  opacity: 1;
  border-radius: 100%;
  transition: opacity 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-form .p-radio label input + span::after {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: calc((24px - 12px) / 2);
  margin-top: -6px;
  width: 12px;
  height: 12px;
  background-color: transparent;
  opacity: 1;
  border-radius: 100%;
  transition: background-color 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-form .p-radio label input:checked + span::after {
  background-color: #45746c;
}

.p-form .p-check label {
  display: inline-block;
  margin-right: 2.5rem;
  padding-left: 2.3rem;
  position: relative;
  line-height: 3;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  cursor: pointer;
}

.p-form .p-check label.v {
  display: block;
}

.p-form .p-check label input {
  display: none;
}

.p-form .p-check label input + span::before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 0;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background-color: #f2f5fa;
  opacity: 1;
  transition: opacity 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-form .p-check label input + span::after {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: calc((24px - 12px) / 2);
  margin-top: -4px;
  width: 12px;
  height: 6px;
  opacity: 1;
  transform-origin: center center;
  transform: translate3d(0%, 0%, 0) rotate(-45deg) scale(1, 1);
  transition: background-color 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-form .p-check label input:checked + span::after {
  border-left: 2px solid #45746c;
  border-bottom: 2px solid #45746c;
}

.p-form .p-file.icon label {
  width: auto;
  padding: 0;
  border: 1px solid #45746c;
  background-color: #f9f9f9;
  padding: 4px;
  border-radius: 2px;
}

.p-form .p-file.icon svg {
  width: 20px;
  height: 20px;
  fill: #45746c;
}

.p-form .p-file.icon .filename {
  padding-left: 0.5rem;
}

.p-form .p-file label > input {
  display: none;
}

.p-form .p-file label {
  display: inline-block;
  color: #45746c;
  background-color: #eee;
  box-sizing: border-box;
  padding: 1rem;
  cursor: pointer;
  text-align: center;
  width: 200px;
}

@media only screen and (max-width: 768px) {
  .p-form .p-file label {
    width: 100%;
  }
}

.p-form .p-file .filename {
  display: inline-block;
  vertical-align: middle;
  padding-left: 1rem;
}

@media only screen and (max-width: 768px) {
  .p-form .p-file .filename {
    display: block;
    padding-left: 0;
    margin-top: 1rem;
  }
}

.p-form .p-file .previewimg {
  margin-top: 0.5rem;
}

.p-form .dlwrap dl {
  display: table;
  width: 100%;
}

.p-form .dlwrap dl + dl {
  margin-top: 1.5rem;
}

@media only screen and (max-width: 768px) {
  .p-form .dlwrap dl {
    display: block;
  }
}

.p-form .dlwrap dt {
  display: table-cell;
  vertical-align: top;
  width: 12rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  line-height: 2.8rem;
  position: relative;
}

@media only screen and (max-width: 768px) {
  .p-form .dlwrap dt {
    display: block;
    width: 100%;
    line-height: 1;
    margin-bottom: 1rem;
  }
}

.p-form .dlwrap dt.req span {
  display: inline-block;
  position: relative;
}

.p-form .dlwrap dt.req span:after {
  content: "\203B";
  position: absolute;
  right: -1rem;
  height: 0;
  color: #f46f60;
  font-size: 10px;
  font-family: "\30E1\30A4\30EA\30AA", "Meiryo", sans-serif;
}

.p-form .dlwrap dd {
  display: table-cell;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

@media only screen and (max-width: 768px) {
  .p-form .dlwrap dd {
    display: block;
  }
}

.p-form .error,
.p-form .p-errmsg,
.p-form .errortxt {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: #f46f60;
}

.p-form .check {
  text-align: center;
  margin: 2rem 0;
}

.p-form .p-btnwrap {
  margin-top: 2rem;
}

.p-form .p-btnwrap .p-btn {
  max-width: 400px;
}

.p-form .json_add {
  width: 3rem;
  height: 3rem;
  position: relative;
  border-radius: 100%;
  border: 2px solid #dee8f4;
  overflow: hidden;
  text-indent: 10rem;
  cursor: pointer;
}

.p-form .json_add::before,
.p-form .json_add::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: #dee8f4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1, 1);
}

.p-form .json_add::after {
  transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(1, 1);
}

.p-tablelist {
  width: 100%;
  overflow-x: scroll;
}

.p-tablelist table {
  min-width: 100%;
}

.p-tablelist th,
.p-tablelist td {
  padding: 1rem 1rem;
  text-align: left;
  white-space: nowrap;
}

.p-tablelist th + *,
.p-tablelist td + * {
  border-left: 1px dotted #ccc;
}

.p-tablelist th.en,
.p-tablelist td.en {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.p-tablelist th.num,
.p-tablelist td.num {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.p-tablelist th.c,
.p-tablelist td.c {
  text-align: center;
}

.p-tablelist th .json,
.p-tablelist td .json {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: 100%;
  flex-wrap: nowrap;
}

.p-tablelist th .json > *,
.p-tablelist td .json > * {
  width: 150px;
  padding: 6px;
  white-space: pre-line;
}

.p-tablelist th .json > * span,
.p-tablelist td .json > * span {
  white-space: pre-line;
  word-break: break-all;
}

.p-tablelist thead th,
.p-tablelist thead td {
  background-color: #aaa;
  color: #fff;
}

.p-tablelist tr {
  border-bottom: 1px solid #ccc;
}

.p-tablelist .editbtn {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.p-client-list {
  margin-bottom: 6rem;
}

.p-client-list .body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 1.5rem;
}

.p-client-list .info {
  grid-row: 1/2;
  grid-column: 1/3;
}

.p-client-list .info dl {
  display: table;
  width: 100%;
}

.p-client-list .info dl > * {
  display: table-cell;
  vertical-align: top;
}

.p-client-list .info dl + dl {
  margin-top: 1rem;
}

.p-client-list .info dt {
  width: 2.5rem;
}

.p-client-list .info dd {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.p-client-list .info dd.vam {
  vertical-align: middle;
}

.p-client-list .paylist {
  grid-row: 2/3;
  grid-column: 1/5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 0rem);
  margin-left: 0rem;
  text-align: center;
}

.p-client-list .paylist > * {
  width: 20%;
  padding-left: 0rem;
  padding-right: 0rem;
}

.p-client-list .paylist .ttl {
  color: #a4b6d3;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.p-client-list .member {
  grid-row: 1/2;
  grid-column: 3/5;
}

.p-client-list .member dl {
  display: table;
  width: 100%;
}

.p-client-list .member dl > * {
  display: table-cell;
  vertical-align: middle;
}

.p-client-list .member dl + dl {
  border-top: 1px solid #dee8f4;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.p-client-list .member dt {
  font-size: 1rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding-right: 1rem;
}

.p-client-list .member .sub {
  color: #a4b6d3;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
}

.p-client-list .member dd {
  width: 5rem;
}

.p-client-list .member a {
  border: 1px solid #45746c;
  border-radius: 100%;
  padding: 0.4rem;
}

.p-client-list .member a svg {
  fill: #45746c;
}

.p-client-list .site {
  grid-row: 3/4;
  grid-column: 1/5;
}

.p-client-list .site li {
  background-color: #fff;
  padding: 2rem;
  border-radius: 4px;
}

.p-client-list .site li + li {
  margin-top: 1rem;
}

.p-client-list .site .head {
  display: table;
  width: 100%;
}

.p-client-list .site .head > * {
  display: table-cell;
  vertical-align: top;
}

.p-client-list .site .head dl {
  display: table;
  width: 100%;
}

.p-client-list .site .head dl > * {
  display: table-cell;
  vertical-align: top;
}

.p-client-list .site .head dl + dl {
  margin-top: 1rem;
}

.p-client-list .site .head dl dt {
  width: 4rem;
  line-height: 1.5rem;
}

.p-client-list .site .head .sitename {
  width: 45%;
}

.p-client-list .site .head .sitename h4 {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.p-client-list .site .head .url {
  width: 45%;
}

.p-client-list .site .head .url a {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  word-break: break-all;
}

.p-client-list .site .head .edit {
  width: 10%;
}

.p-client-list .site .head .edit a {
  margin-left: auto;
  margin-right: 0;
}

.p-client-list .site .tag {
  margin-top: 1rem;
}

.p-client-list .site .tag span {
  display: inline-block;
  background-color: #45746c;
  color: #fff;
  border-radius: 2px;
  margin-right: 3px;
  font-size: 0.8333333333rem;
  font-weight: 600;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 3px 5px;
}

.p-client-list .site .id {
  margin-top: 0.5rem;
}

.p-client-list .site .id p {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.p-client-list .site .id p + p {
  margin-left: 3rem;
}

.p-client-list .site .sitebox {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #dee8f4;
}

.p-client-list .site .sitebox_ttl {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.p-client-list .site .sitebox_body {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 2rem);
  margin-left: -1rem;
}

.p-client-list .site .sitebox_body > * {
  width: 50%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-client-list .site .sitebox_body > * {
  margin-bottom: 3rem;
}

.p-client-list .site .sitebox .ftp .systemttl {
  font-size: 0.8333333333rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.p-client-list .site .sitebox .ftp .systemttl span {
  display: inline-block;
  background-color: #45746c;
  color: #fff;
  padding: 3px 0.5rem;
  border-radius: 3px;
}

.p-client-list .site .sitebox .ftp .memo {
  background-color: #eaf0f8;
  padding: 1rem;
  border-radius: 4px;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 1rem;
}

.p-client-list .site .sitebox .ftp .p-link {
  margin-bottom: 0.5rem;
}

.p-client-list .site .sitebox .ftp dl {
  display: table;
  width: 100%;
  padding: 4px 0;
}

.p-client-list .site .sitebox .ftp dl > * {
  display: table-cell;
  vertical-align: middle;
}

.p-client-list .site .sitebox .ftp dt {
  width: 4rem;
}

.p-client-list .site .sitebox .ftp dd {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.p-client-list .site .sitebox .ftp a {
  word-break: break-all;
}

.p-client-list .site .sitebox .phase {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  width: calc(100% - 1px + 1rem);
  margin-left: -0.5rem;
}

.p-client-list .site .sitebox .phase > * {
  width: 33.3333333333%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.p-client-list .site .sitebox .phase div {
  margin-bottom: 1rem;
}

.p-client-list .site .sitebox .phase a {
  height: 100%;
  display: block;
  border: 1px solid #eaf0f8;
  padding: 1rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .p-client-list .site .sitebox .phase a:hover {
    color: #fff;
    background-color: #a4b6d3;
  }
}

.p-phase-list .phasettl {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.p-phase-list > * {
  margin-bottom: 1rem;
}

.p-phase-list a {
  width: 100%;
}

.p-phase-list dl {
  display: table;
  width: 100%;
}

.p-phase-list dl > * {
  display: table-cell;
  vertical-align: middle;
}

.p-phase-list .btndd {
  width: 200px;
}

.p-phase-list .pricedd {
  width: 200px;
  text-align: right;
}

.p-phase-list .pricedd .price {
  font-size: 1.44rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-phase-list .btnlist {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.p-phase-list .btnlist li {
  padding: 0 0.5rem;
  flex: 1;
  max-width: 200px;
}

.p-phase-list .btnlist input {
  margin-top: 0;
}

.p-phase-detail {
  margin-bottom: 5rem;
}

.p-phase-detail .inv table {
  width: 100%;
}

.p-inv-list dl {
  display: table;
  width: 100%;
}

.p-inv-list dl > * {
  display: table-cell;
  vertical-align: middle;
}

.p-inv-list dl .dd_tag {
  width: 5rem;
}

.p-inv-list dl dd {
  padding: 0.5rem;
}

.p-inv-list dl dd.dd_btn {
  width: 10rem;
}

.p-inv-list dl dd.dd_edit {
  width: 4rem;
}

.p-inv-list .price {
  font-size: 1.44rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.p-inv-list .tag {
  display: inline-block;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: #fff;
  background-color: #45746c;
  padding: 3px 6px;
}

.p-inv-list .no {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
}

.p-inv-detail {
  position: relative;
}

.p-inv-detail .logo {
  width: 60mm;
}

.p-inv-detail .invttl {
  text-align: right;
}

.p-inv-detail .invttl p {
  transform-origin: right top;
}

.p-inv-detail .ttl {
  font-size: 14pt;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 0.5em;
  color: #000;
}

.p-inv-detail .subttl {
  font-size: 8pt;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 1.5em;
  color: #000;
}

.p-inv-detail .pjname {
  font-size: 8pt;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: #000;
}

.p-inv-detail .hankobox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  gap: 20pt;
}

.p-inv-detail .hanko {
  width: 24mm;
}

.p-inv-detail p,
.p-inv-detail dt,
.p-inv-detail dd,
.p-inv-detail li,
.p-inv-detail .sub {
  font-size: 7pt;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: #000;
  transform-origin: left top;
}

.p-inv-detail .tb {
  display: table;
  width: 100%;
}

.p-inv-detail .tb > * {
  display: table-cell;
  vertical-align: top;
}

.p-inv-detail .tbbox {
  margin-bottom: 4em;
}

.p-inv-detail .logo_wrap {
  margin-top: 1em;
  margin-bottom: 4em;
}

.p-inv-detail .project {
  width: 60mm;
  padding-right: 5em;
}

.p-inv-detail .project > div {
  margin-bottom: 4em;
}

.p-inv-detail .recipient {
  width: 60mm;
  padding-right: 5em;
}

.p-inv-detail .table_wrap {
  width: calc(100% - 60mm);
  position: relative;
  padding-right: 3px;
}

.p-inv-detail .table_wrap .table {
  width: 100%;
  margin-bottom: 1.7em;
}

.p-inv-detail .table_wrap .table .head {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-bottom: 0.75em;
}

.p-inv-detail .table_wrap .table .head dd {
  padding: 1.5em 0;
}

.p-inv-detail .table_wrap .table dd {
  padding: 0.75em 0;
}

.p-inv-detail .table_wrap .num {
  text-align: right;
  width: 80px;
  transform-origin: right top;
}

.p-inv-detail .table_wrap .qty {
  text-align: center;
  width: 80px;
}

.p-inv-detail .table_wrap .sub {
  padding-left: 2em;
}

.p-inv-detail .table_wrap .sub ul {
  display: none;
}

.p-inv-detail .table_wrap .sub li {
  padding-left: 2em;
  position: relative;
}

.p-inv-detail .table_wrap .sub li::before {
  content: "-";
  position: absolute;
  top: 0;
  left: 0.5em;
}

.p-inv-detail .table_wrap .total_box {
  padding-top: 2em;
}

.p-inv-detail .table_wrap .total_box hr {
  border: 0;
  border-top: 1px solid #000;
  margin: 0;
  margin-bottom: 2em;
}

.p-inv-detail .table_wrap .total_box dl {
  display: table;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 1.5em;
}

.p-inv-detail .table_wrap .total_box dl > * {
  display: table-cell;
  vertical-align: middle;
}

.p-inv-detail .table_wrap .total_box dl dt {
  font-size: 8pt;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #000;
}

.p-inv-detail .table_wrap .total_box dl dd {
  font-size: 8pt;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #000;
  text-align: right;
  transform-origin: right top;
}

.p-inv-detail .table_wrap .total_box dl.total {
  padding-bottom: 2em;
  border-bottom: 1px solid #000;
  position: relative;
}

.p-inv-detail .table_wrap .total_box dl.total::before {
  display: block;
  width: calc(100% + 2em);
  height: 100%;
  border: 1px solid #000;
  position: absolute;
  top: -1px;
  left: calc(-1em - 1px);
}

.p-inv-detail .footer {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0mm;
  bottom: 10mm;
  letter-spacing: 0.12em;
  transform-origin: center bottom;
  transform: translate3d(0%, 0%, 0) rotate(0deg) scale(0.71, 0.71);
}

.p-coverletter p,
.p-coverletter td,
.p-coverletter li,
.p-coverletter .sub {
  font-size: 6pt;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: #000;
}

.p-coverletter .body {
  width: 35em;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px dotted #eee;
  padding-top: 12mm;
}

.p-coverletter .body .ttl {
  font-size: 12pt;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: #000;
  text-align: center;
}

.p-coverletter .body .date {
  text-align: center;
  margin-bottom: 5em;
}

.p-coverletter .body .tar {
  text-align: right;
}

.p-coverletter .body p {
  margin-bottom: 1em;
}

.p-coverletter .body .doc {
  padding: 5mm;
  border: 1px solid #eee;
  margin-bottom: 2em;
  margin-top: 2em;
}

.p-coverletter .body .doc li::before {
  content: "\30FB";
}

.p-coverletter .body .subttl {
  font-size: 6pt;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: #000;
  margin-bottom: 0.5em;
}

.p-coverletter .footer {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0mm;
  bottom: 10mm;
}

.p-coverletter .footer p {
  letter-spacing: 0.12em;
}

.p-coverletter .footer .logo {
  width: 60mm;
  height: 26mm;
  margin-bottom: 3em;
}

.p-privacy {
  counter-reset: term;
}

.p-privacy h2 {
  font-size: 1.44rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  padding-top: 2rem;
  border-top: 1px solid #c2d0e7;
}

.p-privacy h2:before {
  counter-increment: term;
  content: counter(term) ". ";
}

.p-privacy h3 {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.p-privacy p {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-privacy ul li {
  position: relative;
  padding-left: 1rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  margin-bottom: 0.5rem;
}

.p-privacy ul li:before {
  content: "\30FB";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-privacy .contact {
  border-top: 1px solid #c2d0e7;
  border-bottom: 1px solid #c2d0e7;
  margin-top: 3rem;
  display: table;
  width: 100%;
  background-color: #fff;
}

@media only screen and (max-width: 768px) {
  .p-privacy .contact {
    display: block;
    padding: 2rem 0;
  }
}

.p-privacy .contact dt {
  display: table-cell;
  vertical-align: center;
  padding: 2rem;
  width: 30%;
  border-right: 1px solid #c2d0e7;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

@media only screen and (max-width: 768px) {
  .p-privacy .contact dt {
    display: block;
    width: 100%;
    padding: 0 2rem;
    margin-bottom: 1rem;
  }
}

.p-privacy .contact dd {
  display: table-cell;
  vertical-align: center;
  padding: 2rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

@media only screen and (max-width: 768px) {
  .p-privacy .contact dd {
    display: block;
    width: 100%;
    padding: 0 2rem;
  }
}

.p-faq {
  border-bottom: 1px solid #c2d0e7;
}

.p-faq dl {
  border-top: 1px solid #c2d0e7;
  position: relative;
}

.p-faq dl::before,
.p-faq dl::after {
  content: "";
  width: 1rem;
  height: 2px;
  background-color: #333;
  display: block;
  position: absolute;
  right: 1rem;
  top: 2.6rem;
  margin-top: -1px;
  transition: transform 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-faq dl::after {
  transform: translate3d(0, 0, 0) rotate(90deg);
}

.p-faq dl.is-active::before {
  transform: translate3d(0, 0, 0) rotate(135deg);
}

.p-faq dl.is-active::after {
  transform: translate3d(0, 0, 0) rotate(225deg);
}

.p-faq dt {
  padding: 2rem 0;
  padding-left: 2.5rem;
  padding-right: 3rem;
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  cursor: pointer;
}

.p-faq dt::before {
  content: "Q";
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  left: 0;
  top: 2rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  background-color: #45746c;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-faq dd {
  background-color: #fff;
  padding: 2rem 0;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {
  .p-faq dd {
    padding: 1rem;
  }
}

.p-company dl {
  display: table;
  width: 100%;
  padding: 1rem 0;
  border-top: 1px solid #c2d0e7;
}

.p-company dl:last-child {
  border-bottom: 1px solid #c2d0e7;
}

.p-company dt {
  display: table-cell;
  width: 12rem;
  vertical-align: top;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

@media only screen and (max-width: 768px) {
  .p-company dt {
    width: 10rem;
  }
}

.p-company dd {
  display: table-cell;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-pager__num ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.p-pager__num ul li {
  width: 40px;
  height: 40px;
}

.p-pager__num ul li:not(:nth-child(10n)) {
  margin-right: 2rem;
}

@media only screen and (max-width: 480px) {
  .p-pager__num ul li:not(:nth-child(10n)) {
    margin-right: 1.5rem;
  }
}

.p-pager__num ul li a,
.p-pager__num ul li div {
  box-sizing: border-box;
  background-color: #c2d0e7;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  border-radius: 100%;
  transition: color 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms, background-color 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-pager__num ul li a span,
.p-pager__num ul li div span {
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  left: 0%;
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  transform: translate3d(0%, -50%, 0);
}

@media only screen and (min-width: 1024px) {
  .p-pager__num ul li a:hover {
    background-color: #45746c;
    color: #fff;
  }
}

.p-pager__num ul li div {
  background-color: #c2d0e7;
  color: #fff;
  font-weight: bold;
}

.p-pager__arr ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  width: calc(100% - 1px + 0);
  margin-left: 0;
}

.p-pager__arr ul > * {
  width: 33.3333333333%;
  padding-left: 0;
  padding-right: 0;
}

.p-pager__arr ul li {
  padding: 0.5rem;
}

.p-pager__arr ul li:nth-child(2) {
  text-align: center;
}

.p-pager__arr ul li:nth-child(3) {
  text-align: right;
}

.p-pager__arr ul a {
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  color: #45746c;
}

.p-blog__index.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  width: calc(100% - 1px + 0.5rem);
  margin-left: -0.25rem;
}

.p-blog__index.top > * {
  width: 33.3333333333%;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

@media only screen and (max-width: 1024px) {
  .p-blog__index.top {
    width: calc(100% - 1px + 1rem);
    margin-left: -0.5rem;
  }

  .p-blog__index.top > * {
    width: 50%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media only screen and (max-width: 768px) {
  .p-blog__index.top {
    width: calc(100% - 1px + 0.5rem);
    margin-left: -0.25rem;
  }

  .p-blog__index.top > * {
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

.p-blog__index.top li {
  margin-bottom: 4rem;
}

@media only screen and (max-width: 1024px) {
  .p-blog__index.top li {
    margin-bottom: 3rem;
  }
}

.p-blog__index .img {
  display: block;
  position: relative;
  width: 100%;
  display: block;
  padding-top: 66.6%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(/images/logo.png?9c22f971b76f9e61d19bee2b319d9d2b);
  position: relative;
}

.p-blog__index .tag {
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  position: absolute;
  z-index: 10;
  background-color: #fff;
  color: #45746c;
  padding: 0.5rem 1rem;
  bottom: 0;
  left: 0;
}

.p-blog__index .txt {
  padding-top: 1rem;
  padding-right: 1.5rem;
}

.p-blog__index .txt a {
  display: inline-block;
}

.p-blog__index .taglist a {
  display: inline-block;
  background-color: #45746c;
  color: #fff;
  padding: 3px;
  font-size: 0.8333333333rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
}

.p-blog__index .ttl {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.p-blog__index .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-top: 0.5rem;
}

.p-blog__index .date,
.p-blog__index .cate {
  position: relative;
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.p-blog__index .date {
  margin-right: 0.8rem;
  padding-right: 0.8rem;
}

.p-blog__index .date:after {
  content: "";
  height: 0.6rem;
  width: 1px;
  display: block;
  background-color: #aaa;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -0.3rem;
}

.p-blog__article .head {
  position: relative;
}

.p-blog__article .head .img {
  margin-bottom: 2rem;
  position: relative;
  width: 100%;
  display: block;
  padding-top: 66.6%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(/images/logo.png?9c22f971b76f9e61d19bee2b319d9d2b);
}

.p-blog__article .head .date {
  position: absolute;
  top: 0;
  right: 0;
}

.p-blog__article .head .ttl {
  font-size: 1.728rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.p-blog__article .head .lead {
  margin-top: 2rem;
}

.p-blog__article .head .agenda {
  padding: 2rem;
  border-top: 4px solid #aaa;
  background-color: #fff;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media only screen and (max-width: 768px) {
  .p-blog__article .head .agenda {
    padding: 1.5rem;
  }
}

.p-blog__article .head .agenda a {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  display: block;
}

.p-blog__article .head .agenda a::before {
  color: #45746c;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-blog__article .head .agenda .h2list {
  counter-reset: agendah2num;
}

.p-blog__article .head .agenda .h2list a::before {
  counter-increment: agendah2num;
  content: counter(agendah2num) ". ";
}

.p-blog__article .head .agenda .h3list {
  counter-reset: agendah3num;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}

.p-blog__article .head .agenda .h3list a::before {
  counter-increment: agendah3num;
  content: "(" counter(agendah3num) ") ";
}

.p-blog__article .head .agenda__ttl {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: #45746c;
  margin-bottom: 0.5rem;
}

.p-blog__article .body h2 {
  font-size: 1.44rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 3rem;
}

.p-blog__article .body h2:first-child {
  margin-top: 0;
}

.p-blog__article .body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 2rem;
}

.p-blog__article .body h4 {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  margin-top: 2rem;
}

.p-blog__article .body p {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-blog__article .body p a {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  color: #f46f60;
  text-decoration: underline;
}

.p-blog__article .body em {
  font-style: normal;
  font-weight: bold;
  color: #45746c;
  padding: 0 2px 4px;
  background: linear-gradient(transparent 70%, #f46f60 0%);
}

.p-blog__article .body ol,
.p-blog__article .body ul {
  border: 2px solid #45746c;
  border-radius: 4px;
  padding: 1.5rem;
}

.p-blog__article .body ol li,
.p-blog__article .body ul li {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-blog__article .body ul li {
  padding-left: 1rem;
  line-height: 2.4rem;
  position: relative;
}

.p-blog__article .body ul li::before {
  content: "";
  display: block;
  background-color: #45746c;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: calc(1.2rem - 3px);
}

.p-blog__article .body ol {
  list-style: none;
  counter-reset: olnum;
}

.p-blog__article .body ol li:before {
  counter-increment: olnum;
  content: counter(olnum) ". ";
  color: #45746c;
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-blog__article .body blockquote {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  border: 3px solid #c2d0e7;
  padding: 3rem;
}

@media only screen and (max-width: 768px) {
  .p-blog__article .body blockquote {
    padding: 2rem;
  }
}

.p-blog__article .body table {
  width: 100%;
}

.p-blog__article .body table th {
  background-color: #eee;
}

.p-blog__article .body table td,
.p-blog__article .body table th {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  padding: 6px 1rem;
  border: 1px solid #c2d0e7;
}

.p-blog__article .footer {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.p-blog__article .footer .taglist {
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.p-blog__article .footer .taglist a {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
  background-color: #c2d0e7;
  padding: 4px 0.8rem;
  border-radius: 2rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  transition: background-color 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms, visibility 1200ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .p-blog__article .footer .taglist a:hover {
    background-color: #fff;
  }
}

.p-blog__article .footer .cv {
  margin-bottom: 3rem;
  padding: 5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media only screen and (max-width: 768px) {
  .p-blog__article .footer .cv {
    padding: 3rem;
  }
}

.p-blog__article .footer .cv .txt {
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 2rem;
}

.p-blog__article .footer .cv .txt .ttl {
  font-size: 1.728rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #45746c;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {
  .p-blog__article .footer .cv .txt .ttl {
    margin-bottom: 1rem;
  }
}

.p-blog__article .footer .cv .txt .lead {
  margin-bottom: 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

@media only screen and (max-width: 768px) {
  .p-blog__article .footer .cv .txt .lead {
    text-align: left;
  }

  .p-blog__article .footer .cv .txt .lead br {
    display: none;
  }
}

.p-blog__article .footer .cv .txt .btn {
  margin-left: auto;
  margin-right: auto;
}

.p-snsshare {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.p-snsshare li + li {
  margin-left: 1rem;
}

.p-snsshare li a {
  width: 3rem;
  height: 3rem;
  color: #fff;
  text-align: center;
  display: block;
  border-radius: 100%;
  transition: opacity 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms, visibility 400ms cubip-bezier(0.25, 0.1, 0.25, 1) 0ms;
  opacity: 1;
  position: relative;
}

.p-snsshare li a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.p-snsshare li a svg {
  position: absolute;
  fill: #fff;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1, 1);
}

@media only screen and (min-width: 1024px) {
  .p-snsshare li a:hover {
    opacity: 0.5;
  }
}

.p-news__index a {
  display: block;
}

.p-news__index ul {
  border-bottom: 1px solid #c2d0e7;
}

.p-news__index dl {
  display: table;
  width: 100%;
  border-top: 1px solid #c2d0e7;
}

@media only screen and (max-width: 768px) {
  .p-news__index dl {
    display: block;
  }
}

.p-news__index dt {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  padding: 1rem 0;
  position: relative;
  display: table-cell;
  vertical-align: top;
  width: 10rem;
}

@media only screen and (max-width: 768px) {
  .p-news__index dt {
    display: block;
    width: 100%;
  }
}

.p-news__index dt:before {
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  top: -1px;
  position: absolute;
  display: block;
  background-color: #aaa;
}

.p-news__index .cate {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  padding: 0 2rem;
  color: #45746c;
  display: table-cell;
}

.p-news__index .cate span {
  display: block;
  text-align: center;
  background-color: #c2d0e7;
}

.p-news__index .ttl {
  display: table-cell;
  padding: 1rem 0;
  padding-left: 2rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-news__article {
  border-top: 1px solid #c2d0e7;
}

.p-news__article:last-of-type {
  border-bottom: 1px solid #c2d0e7;
}

.p-news__article .wrap {
  padding: 4rem 0rem 5rem;
  background-color: #fff;
  width: 100%;
  display: table;
}

@media only screen and (max-width: 1024px) {
  .p-news__article .wrap {
    display: block;
  }

  .p-news__article .wrap > * {
    display: block;
    width: 100%;
  }

  .p-news__article .wrap > *:first-child {
    margin-bottom: 2rem;
  }
}

.p-news__article .head {
  display: table-cell;
  width: 20rem;
  padding-right: 4rem;
}

.p-news__article .main {
  display: table-cell;
}

.p-news__article .ttl {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.p-news__article .date {
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-news__article .txt {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.p-news__article .link {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  color: #f46f60;
  position: relative;
}

.p-news__article .link:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background-color: #f46f60;
}

.p-col--split {
  display: table;
  width: 100%;
}

.p-col--split > * {
  padding: 5vw;
}

.p-col--split .first {
  display: table-cell;
  width: 50%;
  background-color: #c2d0e7;
}

.p-col--split .last {
  display: table-cell;
  width: 50%;
  background-color: #fff;
}

.p-col--side {
  position: relative;
}

.p-col--side div {
  width: calc(100% - 2rem - 300px);
  background-color: #fff;
}

.p-col--side aside {
  background-color: #fff;
  width: 300px;
  padding: 3rem;
  position: absolute;
  top: 0;
  right: 0;
}

.p-layout .ttl {
  font-size: 1.44rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-bottom: 3rem;
}

.p-layout .subttl {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.p-layout .txt {
  font-size: 1rem;
  font-weight: 500;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  max-width: 60rem;
}

.p-layout .cap {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "san-serif";
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.p-layout .txtwrap.v1 {
  padding: 5rem 0;
  background-color: #eee;
}

.p-layout .txtwrap.v1 .ttl {
  text-align: center;
}

.p-layout .txtwrap.v1 .txt {
  margin-left: auto;
  margin-right: auto;
}

.p-layout .txtwrap.v2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.p-layout .txtwrap.v2 .ttl {
  flex: 1;
  padding-right: 3rem;
  margin-bottom: 0;
}

.p-layout .txtwrap.v2 .txt {
  flex: 1;
}

.p-layout .txtwrap.v3 {
  position: relative;
  padding-left: 35%;
}

.p-layout .txtwrap.v3 .ttl {
  position: absolute;
  width: 25%;
  left: 0;
  top: 0;
}

.p-layout .txtwrap.v4 {
  position: relative;
  padding-left: 35%;
}

.p-layout .txtwrap.v4 .subttl {
  position: absolute;
  width: 25%;
  left: 0;
  top: 0;
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  padding-left: 5vw;
}

.p-layout .txtwrap.v4 .subttl::before {
  content: "";
  position: absolute;
  display: block;
  width: 3vw;
  height: 1px;
  background-color: #c2d0e7;
  top: 50%;
  left: 0;
  margin-top: -2px;
}

.p-layout.v1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-bottom: 5%;
  padding-right: 4vw;
}

.p-layout.v1.r {
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: 5vw;
}

.p-layout.v1 .p-img {
  width: 50%;
}

.p-layout.v1 .txtwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  width: calc(50%);
  background-color: #f9f9f9;
  padding: 3rem;
}

.p-layout.v2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-bottom: 5%;
}

.p-layout.v2.r {
  flex-direction: row-reverse;
}

.p-layout.v2 .p-img {
  width: 60%;
}

.p-layout.v2 .txtwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  width: 40%;
  padding: 0 5vw;
}

.p-layout.v3 .txtwrap {
  padding: 2rem;
}

.p-layout.v4 {
  padding-right: 5vw;
}

.p-layout.v4.r {
  padding-right: 0vw;
  padding-left: 5vw;
}

.p-layout.v4.r .wrap {
  padding-right: 0;
  padding-left: 12%;
}

.p-layout.v4.r .cap {
  text-align: left;
}

.p-layout.v4 .wrap {
  padding-right: 12%;
}

.p-layout.v4 .p-img {
  margin-bottom: 0.5rem;
}

.p-layout.v4 .cap {
  text-align: right;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "san-serif";
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.p-slide {
  position: relative;
}

.p-slide a {
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .p-slide a:hover {
    opacity: 0.5;
  }
}

.p-slide ul.slide {
  position: relative;
  z-index: 0;
}

.p-slide ul.slide > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0%, 0%, 0);
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms;
}

.p-slide ul.slide > li.is-active {
  opacity: 1;
  z-index: 100;
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-slide .slide_arr {
  position: absolute;
  z-index: 2;
  display: inline-block;
  top: 50%;
}

.p-slide .slide_arr.prev {
  left: 0;
}

.p-slide .slide_arr.next {
  right: 0;
}

.p-slide ul.slide_ctrl {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1;
  font-size: 0;
}

.p-slide ul.slide_ctrl li {
  display: inline-block;
}

.p-slide ul.slide_ctrl li.is-active {
  cursor: default;
}

.p-slide ul.slide_ctrl li.is-active .slide_dots:before {
  border-color: red;
}

.p-slide ul.slide_ctrl li.is-active .slide_dots:after {
  background-color: red;
}

.p-slide ul.slide_ctrl li.is-active .slide_thum {
  opacity: 0.5;
}

.p-slide ul.slide_ctrl li .slide_dots {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  position: relative;
}

.p-slide ul.slide_ctrl li .slide_dots:before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #000;
  border-radius: 100%;
}

.p-slide ul.slide_ctrl li .slide_dots:after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #000;
  border-radius: 100%;
}

.p-slide ul.slide_ctrl li .slide_thum {
  display: block;
  width: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.p-slide ul.slide_ctrl li .slide_thum:before {
  content: "";
  padding-top: 66.66%;
  display: block;
  width: 100%;
}

.p-accordion_head {
  cursor: pointer;
}

.p-accordion_body {
  display: none;
}

body.is-nav_open #MenuBtn ul li {
  transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms, top 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 0ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms, background-color 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
}

body.is-nav_open #MenuBtn ul li:nth-child(1) {
  top: 50%;
  transform: translate3d(0, 0, 0) rotate(45deg);
}

body.is-nav_open #MenuBtn ul li:nth-child(2) {
  opacity: 0;
  top: 50%;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

body.is-nav_open #MenuBtn ul li:nth-child(3) {
  top: 50%;
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

body.is-nav_open #MenuModal {
  z-index: 9998;
  opacity: 1;
  visibility: visible;
}

body #MenuBtn {
  width: 3rem;
  height: 3rem;
  padding: 1.1em 0.6em;
  display: block;
  background-color: #ccc;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

body #MenuBtn ul {
  position: relative;
  width: 100%;
  height: 100%;
}

body #MenuBtn ul li {
  position: absolute;
  background-color: #000;
  width: 100%;
  height: 1px;
  transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, top 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms, opacity 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, background-color 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
}

body #MenuBtn ul li:nth-child(1) {
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

body #MenuBtn ul li:nth-child(2) {
  left: 0;
  top: 50%;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

body #MenuBtn ul li:nth-child(3) {
  left: 0;
  top: 100%;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

body #MenuModal {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, z-index 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
  background-color: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-modal_window {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  transform: translate3d(0, 0, 0);
}

.p-modal_window .p-modal_inner {
  height: 100%;
  overflow: auto;
}

.p-modal_close.base {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  z-index: 0;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
}

.p-modal_close.top {
  background-color: #000000;
  border-radius: 100%;
  display: block;
  width: 3rem;
  height: 3rem;
  padding: 0.5rem;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #ffffff;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  display: none;
}

@media only screen and (min-width: 1024px) {
  .p-modal_close.top:hover {
    background-color: #ccc;
  }
}

.p-modal_close.top svg.p-icon {
  width: 100%;
  height: 100%;
  stroke: #ffffff;
  display: block;
}

.p-modal_close.bottom {
  background-color: rgba(35, 35, 35, 0.3);
  padding: 0.5rem 0;
  width: 10rem;
  border-radius: 30px;
  line-height: 1;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: 1px solid #ffffff;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  left: 50%;
  margin-left: -5rem;
  margin-top: 2rem;
  display: none;
}

@media only screen and (min-width: 1024px) {
  .p-modal_close.bottom:hover {
    background-color: #ccc;
  }
}

.p-modal_close.bottom svg.p-icon {
  height: 1.5rem;
  width: 1.5rem;
  display: inline-block;
  stroke: #ffffff;
  line-height: 1;
  vertical-align: middle;
}

.p-modal_close.bottom span {
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
  line-height: 1;
}

.p-modal_hide {
  height: 0;
  overflow: hidden;
}

.p-modal {
  position: relative;
}

.p-modal .p-modal_wrap {
  width: 100%;
  background-color: #fff;
  border: 2px solid #fff;
  position: fixed;
  display: none;
  border-radius: 4px;
}

@media only screen and (max-width: 768px) {
  .p-modal .p-modal_wrap {
    border-width: 2px;
  }
}

.p-modal .p-modal_inner {
  padding: 4rem;
  height: 100%;
  overflow: auto;
  position: relative;
}

@media only screen and (max-width: 1024px) {
  .p-modal .p-modal_inner {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
}

@media only screen and (max-width: 768px) {
  .p-modal .p-modal_inner {
    padding: 3rem 2rem;
  }
}

.p-modal_slide {
  position: relative;
}

.p-modal_slide .p-modal_slide_content {
  display: none;
}

.p-modal_slide_arr {
  background-color: #000000;
  border-radius: 100%;
  display: block;
  width: 3rem;
  height: 3rem;
  right: 0;
  top: 50%;
  padding: 0.5rem;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center;
  position: absolute;
  z-index: 100;
  border: 1px solid #ffffff;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-modal_slide_arr.prev {
  right: auto;
  left: 0;
  transform: translate3d(-50%, -50%, 0) rotate(180deg);
}

@media only screen and (min-width: 1024px) {
  .p-modal_slide_arr:hover {
    background-color: #ccc;
  }
}

.p-modal_slide_arr svg.p-icon {
  width: 100%;
  height: 100%;
  stroke: #ffffff;
  display: block;
}

.p-modal_window_pg {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  transform: translate3d(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.p-modal_window_pg .pg_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.p-modal_window_pg .pg_wrap:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid #ffffff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
  z-index: 0;
  -webkit-animation: pg_load 1.1s infinite linear;
  animation: pg_load 1.1s infinite linear;
  border-radius: 100%;
}

@keyframes pg_load {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

@-webkit-keyframes pg_load {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.p-modal_window_pg .pg_wrap .pg_inner {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.p-modal_window_pg .pg_wrap .pg_img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.p-modal_window_pg .pg_wrap .pg_txt {
  color: #ffffff;
  padding-top: 1rem;
}

.p-modal_window_pg .pg_modal_arr {
  background-color: transparent;
  border-radius: 100%;
  display: block;
  width: 3rem;
  height: 3rem;
  right: 0;
  top: 50%;
  padding: 0.5rem;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center;
  position: absolute;
  z-index: 100;
  border: 1px solid #ffffff;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.p-modal_window_pg .pg_modal_arr.prev {
  right: auto;
  left: 0;
  transform: translate3d(-50%, -50%, 0) rotate(180deg);
}

@media only screen and (min-width: 1024px) {
  .p-modal_window_pg .pg_modal_arr:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.p-modal_window_pg .pg_modal_arr svg.p-icon {
  width: 100%;
  height: 100%;
  stroke: #ffffff;
  display: block;
}

.p-modal_window_pg .pg_modal_close.top {
  background-color: transparent;
  border-radius: 100%;
  display: block;
  width: 3rem;
  height: 3rem;
  right: 0;
  top: 0;
  padding: 0.5rem;
  transform: translate3d(50%, -50%, 0);
  position: absolute;
  z-index: 100;
  display: none;
  border: 1px solid #ffffff;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .p-modal_window_pg .pg_modal_close.top:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.p-modal_window_pg .pg_modal_close.top svg.p-icon {
  width: 100%;
  height: 100%;
  stroke: #ffffff;
  display: block;
}

.p-modal_window_pg .pg_modal_close.bottom {
  background-color: rgba(35, 35, 35, 0.3);
  padding: 0.5rem 0;
  width: 10rem;
  border-radius: 30px;
  line-height: 1;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: 1px solid #ffffff;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  left: 50%;
  margin-left: -5rem;
  margin-top: 2rem;
  display: none;
}

@media only screen and (min-width: 1024px) {
  .p-modal_window_pg .pg_modal_close.bottom:hover {
    background-color: #ccc;
  }
}

.p-modal_window_pg .pg_modal_close.bottom svg {
  height: 1.5em;
  width: 1.5em;
  display: inline-block;
  fill: #ffffff;
  line-height: 1;
  vertical-align: middle;
}

.p-modal_window_pg .pg_modal_close.bottom span {
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
  line-height: 1;
}

.sa_op {
  opacity: 0;
  transform: translate3d(0px, 0px, 0px);
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.sa_op.sa-active {
  opacity: 1;
}

.sa_up {
  opacity: 0;
  transform: translate3d(0px, 50%, 0px);
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, transform 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0ms;
}

.sa_up.sa-active {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.sa_scale {
  opacity: 0;
  transform-origin: center center;
  transform: translate3d(0px, 0%, 0px) scale(0.5, 0.5);
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, transform 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0ms;
}

.sa_scale.sa-active {
  opacity: 1;
  transform: translate3d(0px, 0%, 0px) scale(1, 1);
}

.sa.sa_delay {
  transition-delay: 0ms;
}

.sa.sa_delay.sa-active {
  transition-delay: 300ms;
}

.sa_list_op.sa-active li {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.sa_list_op li {
  opacity: 0;
  transform: translate3d(0px, 0px, 0px);
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.sa_list_op li:nth-child(1) {
  transition-delay: 0ms;
}

.sa_list_op li:nth-child(2) {
  transition-delay: 200ms;
}

.sa_list_op li:nth-child(3) {
  transition-delay: 400ms;
}

.sa_list_op li:nth-child(4) {
  transition-delay: 600ms;
}

.sa_list_op li:nth-child(5) {
  transition-delay: 800ms;
}

.sa_list_op li:nth-child(6) {
  transition-delay: 1000ms;
}

.sa_list_op li:nth-child(7) {
  transition-delay: 1200ms;
}

.sa_list_op li:nth-child(8) {
  transition-delay: 1400ms;
}

.sa_list_op li:nth-child(9) {
  transition-delay: 1600ms;
}

.sa_list_op li:nth-child(10) {
  transition-delay: 1800ms;
}

.sa_list_op li:nth-child(11) {
  transition-delay: 2000ms;
}

.sa_list_op li:nth-child(12) {
  transition-delay: 2200ms;
}

.sa_list_op li:nth-child(13) {
  transition-delay: 2400ms;
}

.sa_list_op li:nth-child(14) {
  transition-delay: 2600ms;
}

.sa_list_op li:nth-child(15) {
  transition-delay: 2800ms;
}

.sa_list_op li:nth-child(16) {
  transition-delay: 3000ms;
}

.sa_list_op li:nth-child(17) {
  transition-delay: 3200ms;
}

.sa_list_op li:nth-child(18) {
  transition-delay: 3400ms;
}

.sa_list_op li:nth-child(19) {
  transition-delay: 3600ms;
}

.sa_list_op li:nth-child(20) {
  transition-delay: 3800ms;
}

.sa_list_up.sa-active li {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.sa_list_up li {
  opacity: 0;
  transform: translate3d(0px, 50%, 0px);
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, transform 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0ms;
}

.sa_list_up li:nth-child(1) {
  transition-delay: 0ms;
}

.sa_list_up li:nth-child(2) {
  transition-delay: 200ms;
}

.sa_list_up li:nth-child(3) {
  transition-delay: 400ms;
}

.sa_list_up li:nth-child(4) {
  transition-delay: 600ms;
}

.sa_list_up li:nth-child(5) {
  transition-delay: 800ms;
}

.sa_list_up li:nth-child(6) {
  transition-delay: 1000ms;
}

.sa_list_up li:nth-child(7) {
  transition-delay: 1200ms;
}

.sa_list_up li:nth-child(8) {
  transition-delay: 1400ms;
}

.sa_list_up li:nth-child(9) {
  transition-delay: 1600ms;
}

.sa_list_up li:nth-child(10) {
  transition-delay: 1800ms;
}

.sa_list_up li:nth-child(11) {
  transition-delay: 2000ms;
}

.sa_list_up li:nth-child(12) {
  transition-delay: 2200ms;
}

.sa_list_up li:nth-child(13) {
  transition-delay: 2400ms;
}

.sa_list_up li:nth-child(14) {
  transition-delay: 2600ms;
}

.sa_list_up li:nth-child(15) {
  transition-delay: 2800ms;
}

.sa_list_up li:nth-child(16) {
  transition-delay: 3000ms;
}

.sa_list_up li:nth-child(17) {
  transition-delay: 3200ms;
}

.sa_list_up li:nth-child(18) {
  transition-delay: 3400ms;
}

.sa_list_up li:nth-child(19) {
  transition-delay: 3600ms;
}

.sa_list_up li:nth-child(20) {
  transition-delay: 3800ms;
}

.p-masonry {
  position: relative;
}

.p-masonry li {
  position: absolute;
}

.p-masonry li > img {
  width: 100%;
  height: auto;
}

.p-map {
  width: 100%;
  position: relative;
}

.p-map:before {
  content: "";
  padding-top: 40%;
  width: 100%;
  display: block;
  position: relative;
  z-index: 0;
}

.p-map #map_canvas {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.p-totop.float {
  width: 3rem;
  height: 3rem;
  background-color: #ccc;
  padding: 10px;
  border-radius: 100%;
  position: fixed;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, z-index 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
}

.p-totop.float.is-active {
  z-index: 5000;
  opacity: 1;
  visibility: visible;
}

.b-ganto {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.b-ganto__left {
  width: 300px;
}

.b-ganto__right {
  flex: 1;
  overflow-x: scroll;
}

.b-ganto__ul li {
  height: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid #eee;
}

.b-ganto__ul div {
  border-right: 1px solid #eee;
  align-self: center;
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.b-ganto__dateul li {
  display: grid;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 30px;
  border-bottom: 1px solid #eee;
}

.b-ganto .month {
  font-size: 10px;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  border-right: 1px solid #eee;
  padding-left: 10px;
  align-self: center;
}

.b-ganto .date {
  align-self: center;
  font-size: 10px;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  border-right: 1px solid #eee;
  text-align: center;
}

.b-ganto .bar {
  height: 6px;
  background-color: red;
  align-self: center;
  border-radius: 10px;
  width: calc(100% - 10px);
  margin-left: 5px;
}

.p-sec_col {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.p-sec_col .left {
  background-color: #eee;
  padding: 3rem;
  width: 50%;
}

.p-sec_col .right {
  width: 50%;
  padding: 3rem;
}

.p-loginbox {
  position: absolute;
  max-width: 500px;
  width: 100%;
  background-color: #fff;
  padding: 5rem 5rem 2rem;
  border-radius: 1rem;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1, 1);
  box-shadow: 1rem 1rem 1rem 1rem rgba(0, 0, 0, 0.1);
}

.p-loginbox dl {
  margin-bottom: 1rem;
}

.p-top__sec1 {
  margin-bottom: 5rem;
}

.p-top__sec2 {
  background-color: #fff;
  box-shadow: 0rem 0rem 0.5rem rgba(0, 0, 0, 0.1);
  border-radius: 2rem;
  padding: 5rem 0;
  margin-bottom: 5rem;
}

.p-top__btn ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 2rem);
  margin-left: -1rem;
  margin-bottom: 1rem;
}

.p-top__btn ul > * {
  width: 50%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-top__btn .ttl {
  font-size: 1.44rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #45746c;
}

.p-top__btn .subttl {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: rgba(69, 116, 108, 0.5);
}

.p-top__btn .num {
  font-size: 1.44rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: right;
}

.p-top__btn .num .unit {
  font-size: 0.8em;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
}

.p-top__btn .p-link {
  text-align: center;
  display: block;
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.p-top__btn .p-link .num {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.p-top__wip li + li {
  margin-top: 1rem;
}

.p-top__wip a {
  display: block;
}

.p-top__wip dl {
  display: table;
  width: 100%;
}

.p-top__wip dt,
.p-top__wip dd {
  display: table-cell;
  vertical-align: middle;
}

.p-top__wip .phase {
  font-size: 1.2rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  margin-bottom: 3px;
}

.p-top__wip .client {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  color: #6a9089;
}

.p-top__pomo {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 0rem);
  margin-left: 0rem;
}

.p-top__pomo > * {
  width: 33.3333333333%;
  padding-left: 0rem;
  padding-right: 0rem;
}

.p-top__pomo .ttl {
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.p-top__pomo .subttl {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.p-top__pomo .num {
  font-size: 1.44rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: right;
}

.p-top__pomo .num .unit {
  font-size: 0.8em;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
}

.p-top__todo li + li {
  margin-top: 1rem;
}

.p-top__todo a {
  display: block;
}

.p-top__todo dl {
  display: table;
  width: 100%;
}

.p-top__todo dt,
.p-top__todo dd {
  display: table-cell;
  vertical-align: middle;
}

.p-top__todo .todo {
  font-size: 1.2rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  margin-bottom: 3px;
}

.p-top__todo .phase {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: block;
  color: #6a9089;
}

.p-invbtnlist {
  margin-top: -1rem;
  width: 105%;
}

.p-invbtnlist ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 1rem);
  margin-left: -0.5rem;
}

.p-invbtnlist ul > * {
  width: 50%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.p-invbtnlist ul li {
  margin: 2rem 0rem;
  margin-right: 1rem;
}

.p-invbtnlist .ttl {
  font-size: 1.2rem;
  font-weight: normal;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.p-invbtnlist .num {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #333;
}

.p-invbtnlist .num .unit {
  font-size: 0.8em;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.4;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
}

.p-todolist li {
  padding: 1rem 0;
  border-bottom: 1px solid #dee8f4;
}

.p-todolist .ttl {
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-todolist .sub {
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-top: 0.5rem;
  color: #aaa;
}

.p-todolist dt {
  padding-right: 1rem;
}

.p-todolist dd {
  width: 5rem;
}

.p-todolist form {
  width: 100%;
}

.p-todolist form + form {
  margin-top: 0.5rem;
}

.p-todolist .btn {
  width: 100%;
}

.p-todolist .pomo {
  position: relative;
}

.p-todolist .pomo .goal svg {
  fill: #a4b6d3;
}

.p-todolist .pomo .done {
  position: absolute;
  top: 0;
  left: 0;
}

.p-todolist .pomo .done svg {
  fill: #f46f60;
}

.p-todo__box .slick-list li {
  background-color: #45746c;
  padding: 2em;
  margin: 1rem 0.5rem;
}

.p-todo__box .slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.p-todo__box .slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 0.5rem;
  padding: 0;
  cursor: pointer;
}

.p-todo__box .slick-dots li.slick-active button:before {
  opacity: 0.75;
}

.p-todo__box .slick-dots button {
  font-size: 0;
  line-height: 0;
  display: block;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.p-todo__box .slick-dots button::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  content: "";
  display: block;
  border-radius: 100%;
  text-align: center;
  opacity: 0.25;
  background-color: black;
}

.p-todo__box .ttl {
  font-size: 1.44rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 0.5rem;
}

.p-todo__box .sub {
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 0.5rem;
  color: #ccc;
  margin-bottom: 0.5rem;
}

.p-todo__box .btn {
  width: 100%;
}

.p-todo__box .pomo {
  position: relative;
}

.p-todo__box .pomo .goal svg {
  fill: #a4b6d3;
}

.p-todo__box .pomo .done {
  position: absolute;
  top: 0;
  left: 0;
}

.p-todo__box .pomo .done svg {
  fill: #f46f60;
}

.p-todo__box dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1.5rem;
}

.p-todo__box dd > * {
  flex: 1;
  max-width: 80%;
  margin: 0 0.5rem;
}

.p-pomo__top .bar {
  position: relative;
}

.p-pomo__top .bar .goal {
  height: 1rem;
  display: block;
  width: 100%;
  background-color: #ddd;
  border-radius: 3rem;
}

.p-pomo__top .bar .done {
  height: 1rem;
  display: block;
  background-color: #edb132;
  border-radius: 3rem;
  position: absolute;
  top: 0;
  left: 0;
}

.p-pomo__top .bar .num {
  font-size: 1.44rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
  margin-top: 0.5rem;
}

.p-pomo__top .bar .unit {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
}

.p-pomo__top .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 0rem);
  margin-left: 0rem;
}

.p-pomo__top .info > * {
  width: 33.3333333333%;
  padding-left: 0rem;
  padding-right: 0rem;
}

.p-pomo__top .info .num {
  font-size: 2.48832rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
  margin-top: 0.5rem;
  text-align: center;
}

.p-pomo__top .info .sub {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
  text-align: center;
  color: #a4b6d3;
}

.p-info dt {
  width: 2rem;
  vertical-align: top;
}

.p-info dl + dl {
  margin-top: 0.8rem;
}

.p-info .tel {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-info .en {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-info .sub {
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-info .subinfo {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  width: calc(100% - 1px + 0rem);
  margin-left: 0rem;
  text-align: center;
  margin-top: 1.5rem;
}

.p-info .subinfo > * {
  width: 25%;
  padding-left: 0rem;
  padding-right: 0rem;
}

.p-info .subinfo span {
  color: #45746c;
}

.p-info .subinfo .subttl {
  font-size: 0.9rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
}

.p-info .subinfo .subttl span {
  color: #a4b6d3;
}

.p-info .subinfo .main {
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-inv__list li {
  padding: 1rem 0;
  border-bottom: 1px solid #dee8f4;
}

.p-inv__list dd {
  text-align: right;
}

.p-inv__list dl + dl {
  margin-top: 0.5rem;
}

.p-inv__list .ttl {
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-inv__list .ttl svg {
  fill: #a4b6d3;
}

.p-inv__list .subttl {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-inv__list .price {
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-inv__list .date {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-inv__detail .ttl {
  font-size: 2.48832rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
}

.p-inv__detail .subttl {
  font-size: 0.9rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
}

.p-inv__detail dl {
  padding: 0.8rem 0;
}

.p-inv__detail dl > * {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
}

.p-inv__detail dl > *:nth-child(2) {
  width: 6rem;
  text-align: center;
}

.p-inv__detail dl > *:nth-child(3) {
  width: 6rem;
  text-align: right;
}

.p-inv__detail .head {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 3rem;
}

.p-inv__detail .head dl > *:nth-child(3) {
  text-align: center;
}

.p-inv__detail .btn {
  margin-top: 2rem;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.p-sitemap > ul {
  margin-top: 0.5em;
  margin-left: 3rem;
}

.p-sitemap > ul ul {
  margin-top: 0.5em;
  margin-left: 2rem;
  margin-bottom: 0.75em;
}

.p-sitemap > ul li {
  margin-bottom: 0.25em;
  position: relative;
}

.p-sitemap > ul li::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: -1rem;
  width: 10px;
  height: calc(100% + 1.25rem);
  border-left: 1px dotted #ccc;
}

.p-sitemap > ul li::after {
  content: "";
  position: absolute;
  top: calc(1rem + 2px);
  left: -1rem;
  width: 10px;
  border-bottom: 1px dotted #ccc;
}

.p-sitemap > ul li:last-child::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: -1rem;
  width: 10px;
  height: calc(1.25em);
  border-left: 1px dotted #ccc;
}

.p-sitemap span {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
  box-sizing: border-box;
  background-color: #fff;
}

.p-system li {
  padding: 1rem 0;
  border-bottom: 1px solid #dee8f4;
}

.p-system dl > * {
  font-size: 1rem;
  font-weight: normal;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
}

.p-system dl > *:nth-child(2) {
  width: 7rem;
}

.p-system dl > *:nth-child(3) {
  width: 7rem;
}

.p-system dl > *:nth-child(4) {
  width: 2rem;
}

.p-system .head {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #dee8f4;
  margin-top: 3rem;
}

.p-system .head > * {
  font-size: 1rem;
  font-weight: normal;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0em;
  line-height: 1.7;
}

.p-system .head > *:nth-child(2),
.p-system .head > *:nth-child(3) {
  width: 7rem;
}

.p-system .head > *:nth-child(4) {
  width: 2rem;
}

.p-system .sub {
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-top: 0.5rem;
  color: #aaa;
}

.p-page__form {
  padding: 5rem 0;
}

.p-page__form .p-ttl {
  display: none;
}

.p-page__form .section_wrap,
.p-page__form .block_ttl {
  padding: 5rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.p-page__form .formbox + .formbox {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px dashed #dee8f4;
  position: relative;
}

.p-page__form .formbox + .formbox::before {
  content: "OR";
  display: block;
  position: absolute;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  color: #dee8f4;
  background-color: #fff;
  left: 50%;
  top: 0;
  padding: 0.5rem 1rem;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1, 1);
}

.p-page__form .formttl {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.p-page__form .formttl span {
  background-color: #45746c;
  color: #fff;
  display: inline-block;
  padding: 0px 6px;
}

.l-header {
  transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 1000001;
}

.l-header.on {
  opacity: 1;
}

.l-header .main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #fff;
  padding: 0 5vw;
}

@media only screen and (max-width: 768px) {
  .l-header .main {
    width: 100%;
    height: auto;
    top: auto;
    bottom: 0;
    flex-direction: row;
  }
}

.l-header .wrap {
  position: relative;
  z-index: 1000001;
}

.l-header .logo {
  position: relative;
  z-index: 1;
  padding: 0rem 0rem;
  text-align: center;
}

.l-header .logo svg {
  width: 168px;
  height: 28px;
}

@media only screen and (max-width: 480px) {
  .l-header .logo svg {
    width: 118px;
    height: 24px;
  }
}

.l-header .gnav {
  z-index: 10;
  padding-right: 0;
  padding: 0rem 0;
  margin-right: -1rem;
}

.l-header .gnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .l-header .gnav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
}

.l-header .gnav li + li {
  margin-top: 3px;
}

.l-header .gnav a {
  padding: 1rem 1rem;
  display: block;
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.l-header .gnav a::before {
  content: "";
  width: 3rem;
  height: 3rem;
  top: 50%;
  left: 50%;
  position: absolute;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1, 1);
  z-index: 0;
  border-radius: 100%;
  transition: background-color 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.l-header .gnav a svg {
  fill: #45746c;
}

.l-header .gnav a span {
  padding-left: 1rem;
  display: none;
}

.l-header .gnav .en {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.8;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.l-header .gnav .jp {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
  line-height: 1;
}

.l-header .gnav .btn {
  background-color: #45746c;
  padding: 1rem 2rem;
  text-align: center;
}

.l-header .gnav .btn span {
  color: #fff;
}

.l-header .plus {
  width: 4rem;
  height: 4rem;
  background-color: #edb132;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  border-radius: 100%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(69, 116, 108, 0.1);
}

.l-header .plus::before,
.l-header .plus::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -0.6rem;
}

.l-header .plus::after {
  transform-origin: center center;
  transform: translate3d(0%, 0%, 0) rotate(90deg) scale(1, 1);
}

.l-header .sub {
  display: none;
}

.l-header .sns ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
}

.l-header .sns ul li + li {
  margin-left: 1rem;
}

.l-header .hbgicon {
  display: none;
  position: absolute;
  top: 50%;
  right: 0%;
  z-index: 1000001;
  padding: 10px;
  transform: translate3d(0%, -50%, 0);
}

@media only screen and (max-width: 1024px) {
  .l-header .hbgicon {
    display: block;
  }
}

.l-header .hbgicon.on ul li {
  background-color: #45746c;
}

.l-header .hbgicon.is-active ul li {
  background-color: #45746c;
}

.l-header .hbgicon.is-active ul li:nth-child(1) {
  top: 50%;
  width: 80%;
  left: 10%;
  transform: translate3d(0px, 0px, 0px) rotate(45deg);
}

.l-header .hbgicon.is-active ul li:nth-child(2) {
  top: 50%;
  opacity: 0;
}

.l-header .hbgicon.is-active ul li:nth-child(3) {
  top: 50%;
  width: 80%;
  left: 10%;
  transform: translate3d(0px, 0px, 0px) rotate(-45deg);
}

.l-header .hbgicon ul {
  width: 28px;
  height: 16px;
  position: relative;
}

@media only screen and (max-width: 768px) {
  .l-header .hbgicon ul {
    width: 18px;
  }
}

.l-header .hbgicon ul li {
  position: absolute;
  width: 100%;
  background-color: #45746c;
  height: 1px;
  left: 0;
  opacity: 1;
  transform: translate3d(0px, 0px, 0px) rotate(0deg);
  transform-origin: center center;
}

.l-header .hbgicon ul li:nth-child(1) {
  top: 0;
  width: 100%;
  transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, top 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, background-color 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  transform: translate3d(0px, 0px, 0px) rotate(0deg);
}

.l-header .hbgicon ul li:nth-child(2) {
  top: 50%;
  width: 100%;
  opacity: 1;
}

.l-header .hbgicon ul li:nth-child(3) {
  top: 100%;
  width: 100%;
  transform: translate3d(0px, 0px, 0px) rotate(0deg);
  transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, top 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, background-color 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.l-header .hbgmenu {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 0;
  z-index: 1000000;
  opacity: 0;
  visibility: hidden;
  transition: height 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, visibility 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (max-width: 1024px) {
  .l-header .hbgmenu {
    display: block;
  }
}

.l-header .hbgmenu.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, visibility 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.l-header .hbgmenu .base {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}

.l-header .hbgmenu .base::after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #edb132;
  z-index: 2;
}

.l-header .hbgmenu .wrap {
  position: relative;
  z-index: 2;
  top: 50%;
  transform: translate3d(0%, -50%, 0);
}

.l-header .hbgmenu .spnav li {
  width: 100%;
  text-align: center;
}

.l-header .hbgmenu .spnav a {
  display: block;
}

.l-header .hbgmenu .sns ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: -0.5rem;
}

.l-header .hbgmenu .sns ul a {
  padding: 0.5rem;
  text-align: right;
}

.l-header--1 .main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.l-header--1 .main .sub1 {
  display: none;
}

.l-header--1 .main .sub2 {
  display: none;
}

.l-header--2 .main {
  display: table;
  width: 100%;
}

.l-header--2 .main .logo {
  display: table-cell;
}

.l-header--2 .main .gnav {
  display: table-cell;
}

.l-header--2 .main .gnav .btn {
  display: none;
}

.l-header--2 .main .sub2 {
  display: none;
}

.l-header--3 .main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.l-header--3 .main .logo {
  position: relative;
  z-index: 1;
  padding: 1rem 0rem;
  width: 150px;
}

.l-header--3 .main .gnav .btn {
  display: none;
}

.l-header--3 .main .sub2 {
  display: none;
}

.l-header--4 .main {
  position: relative;
}

.l-header--4 .main .logo {
  display: block;
  padding: 2rem 0rem;
  margin-left: auto;
  margin-right: auto;
}

.l-header--4 .main .gnav,
.l-header--4 .main .sub2 {
  display: none;
}

.l-header--4 .main .sub1 {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.l-header--4 .hbgicon {
  display: block;
  right: auto;
  left: 0;
}

.l-header--5 .main {
  position: relative;
}

.l-header--5 .main .logo {
  padding: 2rem 0rem;
}

.l-header--5 .main .gnav,
.l-header--5 .main .sub2,
.l-header--5 .main .sub1 {
  display: none;
}

.l-header--5 .hbgicon {
  display: block;
}

.l-header--6 .main {
  position: relative;
}

.l-header--6 .main .logo {
  padding: 2rem 0rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.l-header--6 .main .gnav {
  border-top: 1px solid #eee;
}

.l-header--6 .main .gnav .btn {
  display: none;
}

.l-header--6 .main .sub1 {
  position: absolute;
  left: 0;
  top: 0;
  height: 69px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.l-header--6 .main .sub2 {
  position: absolute;
  right: 0;
  top: 0;
  height: 69px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.l-header--6 .main .other ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.l-header--6 .main .other ul li + li {
  margin-left: 1rem;
}

.l-header--6 .main .lang {
  font-size: 1rem;
  font-weight: 700;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.08em;
  line-height: 1;
}

.l-header--6 .main .search {
  position: relative;
}

.l-header--6 .main .search span {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translate3d(0, -50%, 0);
}

.l-header--6 .main .search input {
  text-indent: 2rem;
}

.l-header--7 .main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.l-header--7 .main .gnav {
  padding-top: 2rem;
  padding-right: 0;
}

.l-header--7 .main .gnav .btn {
  display: none;
}

.l-header--7 .main .sub1 {
  position: absolute;
  top: 0;
  right: 0;
}

.l-header--7 .main .sub2 {
  display: none;
}

.l-header--7 .main .sns {
  background-color: #45746c;
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
}

.l-footer .tb {
  display: table;
  width: 100%;
  padding: 3rem 0;
}

.l-footer .tb > * {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}

.l-footer .logo {
  width: 200px;
  margin-bottom: 1rem;
}

.l-footer .add {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.l-footer .tel {
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.l-footer .sns {
  margin-top: 1rem;
}

.l-footer .sns ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-left: -0.5rem;
}

.l-footer .sns a {
  padding: 0.5rem;
}

.l-footer .fnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  width: calc(100% - 1px + 0);
  margin-left: 0;
}

.l-footer .fnav ul > * {
  width: 25%;
  padding-left: 0;
  padding-right: 0;
}

.l-footer .fnav a {
  padding: 0.5rem 0rem;
  display: block;
  text-align: right;
}

.l-footer .fnav a span {
  display: block;
}

.l-footer .fnav .en {
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.l-footer .fnav .jp {
  font-size: 0.8333333333rem;
  font-weight: 400;
  font-family: ryo-gothic-plusn, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
  line-height: 1;
  display: none;
}

.l-footer .copy {
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.8;
  padding: 1rem;
}

.block_ttl {
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  text-decoration: underline;
  margin-bottom: 2rem;
  margin-top: 10rem;
}

.b-nav__top ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.b-nav__top ul a {
  min-width: 100px;
  text-align: center;
  transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, visibility 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .b-nav__top ul a:hover {
    background-color: #f9f9f9;
  }
}

.b-nav__top .num {
  text-align: center;
  font-size: 1.44rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.b-nav__top .num .unit {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.b-phase__top__wrap {
  border-bottom: 1px solid #eee;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.b-phase__top__head {
  margin-bottom: 1rem;
}

.b-phase__top__btnlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1rem;
}

.b-phase__top__btnlist > * {
  min-width: 120px;
  margin: 0 0.5rem;
}

.b-phase__top__btnlist input[type=submit] {
  margin-top: 0;
}

.b-todo__full + .b-todo__full {
  margin-top: 5rem;
}

.b-todo__body {
  background-color: #f9f9f9;
  padding: 2rem;
}

@media only screen and (max-width: 480px) {
  .b-todo__body {
    padding: 1rem;
  }
}

.b-todo__list > li {
  padding-right: 2rem;
  position: relative;
}

.b-todo__list > li + li {
  margin-top: 6px;
}

.b-todo__list a {
  display: block;
}

.b-todo__list svg {
  width: 2rem;
  height: 2rem;
  width: 2rem;
  height: 2rem;
  transition: fill 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.b-todo__list svg.is-active svg {
  fill: #dee8f4;
}

.b-todo__list dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #f9f9f9;
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 4rem;
  border: 1px solid #eee;
  flex-wrap: nowrap;
}

@media only screen and (max-width: 480px) {
  .b-todo__list dl {
    flex-wrap: wrap;
    position: relative;
    border-radius: 4px;
    padding: 0.5rem 0.8rem;
    padding-left: 3rem;
  }
}

.b-todo__list__phase {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.b-todo__list__phase__client {
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 4px;
  display: block;
}

.b-todo__list__pomo {
  width: 8rem;
  text-align: right;
}

@media only screen and (max-width: 480px) {
  .b-todo__list__pomo {
    width: 50%;
    text-align: left;
  }
}

.b-todo__list__pomo svg {
  width: 1rem;
  height: 1rem;
  fill: #dee8f4;
}

.b-todo__list__pomo svg.is-active {
  fill: #f46f60;
}

.b-todo__list__pomo .pomoicon {
  display: inline-block;
  vertical-align: middle;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 100%;
  background-color: #dee8f4;
}

.b-todo__list__pomo .pomoicon.is-active {
  background-color: #f46f60;
}

.b-todo__list__checkbtn {
  width: 2rem;
  position: relative;
}

@media only screen and (max-width: 480px) {
  .b-todo__list__checkbtn {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translate3d(0%, -50%, 0) rotate(0deg) scale(1, 1);
  }
}

.b-todo__list__checkbtn form {
  width: 2rem;
  height: 2rem;
}

.b-todo__list__checkbtn button {
  padding: 0;
  border: 0px solid #000;
  background-color: transparent;
}

.b-todo__list__checkbtn svg {
  fill: #45746c;
  display: block;
}

.b-todo__list__title {
  flex: 1;
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.08em;
  line-height: 2;
}

@media only screen and (max-width: 480px) {
  .b-todo__list__title {
    width: 100%;
    flex: auto;
    padding: 0;
  }
}

.b-todo__list__date {
  width: 8rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
  opacity: 0.6;
}

@media only screen and (max-width: 480px) {
  .b-todo__list__date {
    width: 50%;
    text-align: right;
  }
}

.b-todo__list__editbtn {
  width: 2rem !important;
  position: absolute;
  right: 0;
  top: 50%;
  transform-origin: center center;
  transform: translate3d(0%, -50%, 0) rotate(0deg) scale(1, 1);
  text-align: right;
}

.b-todo__list__editbtn svg {
  fill: #45746c;
  width: 1.6rem;
  height: 1.6rem;
}

.b-todo__list__addbtn {
  text-align: right;
}

.b-todo__list__addbtn a {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid #45746c;
  color: #45746c;
  background-color: #fff;
  border-radius: 4rem;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: #45746c;
  transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .b-todo__list__addbtn a:hover {
    color: #45746c;
    background-color: #fff;
  }
}

.b-todo__list__addbtn a.hover {
  color: #45746c;
  background-color: #fff;
}

.b-todo__addform {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  padding: 0.5rem;
  background-color: #eee;
}

@media only screen and (max-width: 480px) {
  .b-todo__addform {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-direction: column;
  }
}

.b-todo__addform > div {
  width: 12rem;
  margin-right: 0.5rem;
}

@media only screen and (max-width: 480px) {
  .b-todo__addform > div {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

.b-todo__addform > div.title {
  flex: 1;
}

@media only screen and (max-width: 480px) {
  .b-todo__addform > div.title {
    width: 100%;
    flex: auto;
  }
}

.b-todo__addform > div span {
  font-size: 0.8333333333rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2;
}

.b-todo__addform input,
.b-todo__addform select {
  width: 100%;
  background-color: #fff !important;
}

.b-todo__addform .error {
  display: block;
}

.b-todo__addform button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 1px solid #45746c;
  width: 4rem;
  color: #fff;
  background-color: #45746c;
  border-radius: 5rem;
}

@media only screen and (max-width: 480px) {
  .b-todo__addform button {
    width: 200px;
  }
}

.b-todo__addform button span {
  font-size: 0.8333333333rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 2.8rem;
  line-height: calc(2.8rem - 2px);
}

.b-todo__addform button svg {
  fill: #45746c;
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 4;
}

.b-todo__editform {
  background-color: #eee;
  position: relative;
  padding-right: 4.5rem;
}

@media only screen and (max-width: 480px) {
  .b-todo__editform {
    padding-right: 0;
  }
}

.b-todo__editform .deleteform {
  position: absolute;
  right: 0;
  bottom: 0.5rem;
}

@media only screen and (max-width: 480px) {
  .b-todo__editform .deleteform {
    position: relative;
    right: auto;
    bottom: auto;
  }
}

.b-todo__editform .deleteform button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 1px solid #45746c;
  width: 4rem;
  height: 2.8rem;
  background-color: #fff;
  border-radius: 5rem;
}

@media only screen and (max-width: 480px) {
  .b-todo__editform .deleteform button {
    width: 150px;
  }
}

.b-todo__editform .deleteform button svg {
  display: block;
  fill: #45746c;
  width: 20px;
  height: 20px;
  stroke-width: 4;
}

.b-pomo {
  width: 100%;
  height: 100%;
  background-color: #45746c;
  position: relative;
  z-index: 10000000000;
  transition: background-color 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.b-pomo.is-active {
  background-color: #f46f60;
}

.b-pomo__wrap {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1, 1);
}

@media only screen and (max-width: 480px) {
  .b-pomo__wrap {
    width: 90%;
  }
}

.b-pomo__timer {
  text-align: center;
  font-size: 6.1917364224rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  margin-bottom: 2rem;
}

.b-pomo__taskarea {
  background-color: #fff;
  padding: 3rem;
  border-radius: 3rem;
}

@media only screen and (max-width: 480px) {
  .b-pomo__taskarea {
    padding: 3rem 2rem;
  }
}

.b-pomo__tasktitle {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.b-pomo__phase {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
}

.b-pomo__phase__client {
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.b-pomo__phase__client::before {
  content: "/";
  display: inline-block;
  padding: 0 0.5rem;
}

.b-pomo__subtask li {
  position: relative;
}

.b-pomo__subtask li + li {
  margin-top: 4px;
}

.b-pomo__subtask a {
  display: block;
  border-radius: 4rem;
  background-color: #f9f9f9;
  transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, visibility 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .b-pomo__subtask a:hover {
    background-color: #eee;
  }
}

.b-pomo__subtask a.hover {
  background-color: #eee;
}

.b-pomo__subtask svg {
  width: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  transition: fill 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

.b-pomo__subtask svg.is-active svg {
  fill: #dee8f4;
}

.b-pomo__subtask dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.3rem;
  border-radius: 4px;
  flex-wrap: nowrap;
}

@media only screen and (max-width: 480px) {
  .b-pomo__subtask dl {
    flex-wrap: wrap;
    position: relative;
    padding-left: 1.5rem;
  }
}

.b-pomo__subtask__phase {
  margin-bottom: 1rem;
  font-size: 1.44rem;
  font-weight: 600;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.8;
}

.b-pomo__subtask__phase__client {
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1;
  display: block;
}

.b-pomo__subtask__checkbtn {
  width: 1.5rem;
}

@media only screen and (max-width: 480px) {
  .b-pomo__subtask__checkbtn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(0%, -50%, 0) rotate(0deg) scale(1, 1);
  }
}

.b-pomo__subtask__checkbtn svg {
  fill: #45746c;
}

.b-pomo__subtask__title {
  flex: 1;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 400;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.08em;
  line-height: 2;
}

@media only screen and (max-width: 480px) {
  .b-pomo__subtask__title {
    width: 100%;
  }
}

.b-pomo__subtask__addbtn {
  text-align: right;
}

.b-pomo__subtask__addbtn a {
  margin-top: 1rem;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "sofia-pro", ryo-gothic-plusn, sans-serif, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid #45746c;
  color: #45746c;
  background-color: #fff;
  border-radius: 4rem;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: #45746c;
  transition: color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms, background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  .b-pomo__subtask__addbtn a:hover {
    color: #45746c;
    background-color: #fff;
  }
}

.b-pomo__subtask__addbtn a.hover {
  color: #45746c;
  background-color: #fff;
}

.b-pomo__done {
  margin-top: 1.5rem;
}

@media only screen and (max-width: 1024px) {
  .b-pomo__done.p-btnwrap.c {
    flex-direction: row;
  }

  .b-pomo__done.p-btnwrap.c > * + * {
    margin-bottom: 0;
  }
}

.b-pomo__done form {
  width: auto;
  max-width: 120px;
}

.b-pomo__done a,
.b-pomo__done button {
  width: 100%;
  border-radius: 4rem;
  max-width: 120px;
}