@charset "UTF-8";

/*--------------
ここから
--------------*/


/* ▽ 初期設定 --------------*/

#osakana2025 {
  position: relative;
  /* padding-bottom: 120px; */
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color_base);
  overflow: hidden;
} 

#osakana2025 * {
  box-sizing: border-box;
}

#osakana2025 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

#osakana2025 a {
  transition: 0.5s ease-in-out;
  text-decoration: none;
}

#osakana2025 a:hover {
  opacity: 0.5;
  transition: 0.5s ease-in-out;
}

@media screen and (max-width: 767px) {
  #osakana2025 a:hover {
    opacity: 1;
  }
}

.pc {
  display:block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

#osakana2025 ul, #osakana2025 li {
  list-style: none;
}


/*--------------
レイアウト
--------------*/

#osakana2025 .base_container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 calc(40/1280*100%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .base_container  {
    padding: 0 calc(40/750*100%);
  }
}

#osakana2025 .l_container {
  max-width: 1024px;
  margin: 0 auto;
}

/*--------------
メソッド
--------------*/

:root {
  --color_base: #000;
  --color_white: #fff;
  --color_red: #b70d0d;
  --color_orange: #fb6829;
  --color_yellow: #ffd34a;
  --ff_yakuhan: "YakuHanJPs", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
}

/* ▽ タイトル --------------*/
#osakana2025 .ttl_kiyaku {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding-top: calc(80/1024*100%);
  margin-bottom: 1em;
  color: var(--color_navy);
}

@media screen and (max-width: 1000px) {
  #osakana2025 .ttl_kiyaku {
    font-size: 2.8vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .ttl_kiyaku {
    font-size: 5.3vw;
  }
}

#osakana2025 .ttl_kiyaku02,
#osakana2025 .ttl_kiyaku02_sec02,
#osakana2025 .ttl_kiyaku02_sec03 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding: .3em 0;
  margin-bottom: 1em;
  margin-top: calc(80/1024*100%);
}

#osakana2025 .ttl_kiyaku02 {
  color: var(--color_navy);
  background-color: #dadada;
}

#osakana2025 .ttl_kiyaku02_sec02 {
  color: var(--color_white);
  background-color: var(--color_orange);
}

#osakana2025 .ttl_kiyaku02_sec03 {
  color: var(--color_navy);
  background-color: var(--color_yellow);
}

@media screen and (max-width: 1000px) {
  #osakana2025 .ttl_kiyaku02,
  #osakana2025 .ttl_kiyaku02_sec02,
  #osakana2025 .ttl_kiyaku02_sec03 {
    font-size: 2.0vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .ttl_kiyaku02,
  #osakana2025 .ttl_kiyaku02_sec02,
  #osakana2025 .ttl_kiyaku02_sec03 {
    font-size: 3.7vw;
    margin-top: calc(80/670*100%);
    padding: .5em 0;
  }
}

/* ▽ テキスト --------------*/

#osakana2025 .text_16 {
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
  font-family: var(--ff_yakuhan);
  word-break: break-all;
}

#osakana2025 .text_16 span {
  font-size: 130%;
  font-weight: 700;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .text_16 {
    font-size: 1.6vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .text_16 {
    font-size: 3.7vw;
  }
}

#osakana2025 .text_16 a {
  text-decoration: underline;
}

/* ▽ リスト --------------*/

#osakana2025 .kiyaku_list {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--ff_yakuhan);
}

#osakana2025 .kiyaku_list li {
  margin-top: .3em;
}

#osakana2025 .kiyaku_list li span {
  font-size: 14px;
}

#osakana2025 .kiyaku_list li a {
  text-decoration: underline;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .kiyaku_list {
    font-size: 1.6vw;
  }

  #osakana2025 .kiyaku_list li span {
    font-size: 1.4vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .kiyaku_list {
    font-size: 3.7vw;
  }

  #osakana2025 .kiyaku_list li span {
    font-size: 3.2vw;
  }
}

#osakana2025 .kiyaku_notes {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--ff_yakuhan);
  margin-top: 1em;
}

#osakana2025 .kiyaku_notes li {
  margin-top: .3em;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .kiyaku_notes {
    font-size: 1.4vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .kiyaku_notes {
    font-size: 3.2vw;
  }
}

/* ▽ マージン --------------*/

.kiyaku_notes + .kiyaku_list {
  margin-top: 1em;
}

.text_16 + .kiyaku_list {
  margin-top: 1em;
}

/*--------------
キービジュアル
--------------*/  

#osakana2025 .kv {
  max-width: 100%;
  margin: 0 auto;
}

/*--------------
セクション01
--------------*/

#osakana2025 .sec01 {
    background: url(/cp/osakana2025/img/sec01_bg_pc.jpg) no-repeat center center / cover;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec01 {
    background: url(/cp/osakana2025/img/sec01_bg_sp.jpg) no-repeat center center / cover;
  }
}

#osakana2025 .sec01_wrap {
    width: calc(520/1024*100%);
    margin: 0 0 0 auto;
    padding: calc(55/1024*100%) calc(74/1024*100%) calc(80/1024*100%) 0 ;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec01_wrap {
      width: 100%;
      margin: 0 auto;
      padding: calc(75/710*100%) 0 calc(520/710*100%) ;
  }
}

#osakana2025 .sec01_ttl {
  width: calc(402/500*100%);
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec01_ttl {
    width: calc(600/710*100%);
    margin: 0 auto;
  }
}

#osakana2025 .sec01_text {
  font-size: 19px;
  line-height: 1.5;
  text-align: center;
  color: #492410;
  font-weight: 700;
  margin: calc(25/500*100%) auto 0;
  font-family: var(--ff_yakuhan);
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec01_text {
    font-size: 1.9vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec01_text {
    font-size: 4.0vw;
    margin: calc(35/710*100%) auto 0;
  }
}


/*--------------
セクション02
--------------*/

#osakana2025 .sec02 {
    background: url(/cp/osakana2025/img/sec02_bg_pc.jpg) no-repeat center center / cover;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02 {
    background: url(/cp/osakana2025/img/sec02_bg_sp.jpg) no-repeat center center / cover;
  }
}

#osakana2025 .sec02_container {
  width: 100%;
  padding-bottom: calc(220/1024*100%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_container {
    padding-bottom: calc(300/670*100%);
  }
}

#osakana2025 .sec02_ttl {
    width: calc(864/1024*100%);
    margin: 0 auto;
    padding-top: calc(90/1024*100%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_ttl {
    width: 100%;
    padding-top: calc(80/710*100%);
  }
}

#osakana2025 .sec02_oubo {
  width: calc(864/1024*100%);
  border-top: 4px solid;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #f9e64c, #ebad24, #f9e64c, #d49a14, #f9e64c, #ebad24, #f9e64c) 1;
  font-family: var(--ff_yakuhan);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--color_white);
  text-align: center;
  padding: calc(20/1024*100%) 0 calc(20/1024*100%);
  margin: 0 auto;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec02_oubo {
    font-size: 3.2vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_oubo {
    width: 100%;
    border-top: .8vw solid;
    border-bottom: .8vw solid;
    font-size: 4.1vw;
    line-height: 1.5;
    padding: calc(20/670*100%) 0 calc(20/670*100%);
  }
}

#osakana2025 .c_container {
  width: 100%;
  margin: calc(110/1024*100%) auto 0;
  padding: 0 calc(40/1024*100%) calc(20/1024*100%);
  background-color: var(--color_white);
  border-radius: 10px;
  filter:drop-shadow(16px 16px 16px rgba(53, 0, 2, .4));
  will-change: filter;
  border-radius: 20px;
  position: relative;
}

#osakana2025 .c_container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 4px; /* 枠線の太さ */
  background: linear-gradient(90deg, #f9e64c, #ebad24, #f9e64c, #d49a14, #f9e64c, #ebad24, #f9e64c);
  -webkit-mask:
    linear-gradient(90deg, #f9e64c, #ebad24, #f9e64c, #d49a14, #f9e64c, #ebad24, #f9e64c) content-box, 
    linear-gradient(90deg, #f9e64c, #ebad24, #f9e64c, #d49a14, #f9e64c, #ebad24, #f9e64c);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1; /* 背景に回す */
}

@media screen and (max-width: 767px) {
  #osakana2025 .c_container {
    width: 100%;
    margin: calc(115/710*100%) auto 0;
    padding: calc(80/710*100%) calc(40/710*100%) calc(40/710*100%);
    border-radius: 2.6vw;
    filter:drop-shadow(16px 16px 16px rgba(53, 0, 2, .4));
    will-change: filter;
    border-radius: 20px;
    position: relative;
  }

  #osakana2025 .c_container::before {
    content: "";
    position: absolute;
    border-radius: 2.6vw;
    padding: .5vw;
  }
}

#osakana2025 .sec02_ttl_shouhin {
  width: calc(265/1024*100%);
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: calc(-26/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_ttl_shouhin {
    width: calc(330/710*100%);
    margin: calc(-33/710*100%) auto 0;
  }
}

#osakana2025 .sec02_wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: calc(55/944*100%) 0 calc(20/944*100%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_wrap {
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(40/590*100%) 0;
  }
}

#osakana2025 .sec02_wrap .pay {
  width: 50%;
  border-right: 2px solid #e0e0e0;
}

#osakana2025 .sec02_wrap .pay img {
  width: calc(373/472*100%);
  margin: 0 auto;
  padding-top: calc(20/472*100%)
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_wrap .pay {
    width: 100%;
    border-right: none;
    border-bottom: 2px solid #e0e0e0;
  }

  #osakana2025 .sec02_wrap .pay img {
    width: calc(496/590*100%);
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: calc(75/590*100%);
  }
}

#osakana2025 .sec02_wrap .bandage {
  width: 50%;
}

#osakana2025 .sec02_wrap .bandage img {
  width: calc(379/472*100%);
  margin: 0 auto;
  padding-top: calc(20/472*100%)
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_wrap .bandage {
    width: 100%;
  }

  #osakana2025 .sec02_wrap .bandage img {
    width: 100%;
    margin: 0 auto;
    padding-top: calc(75/590*100%);
  }
}

#osakana2025 .sec02_wrap .or {
  position: absolute;
  width: calc(58/944*100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_wrap .or {
    width: calc(116/590*100%);
    margin: calc(-50/590*100%) auto 0;
  }
}

#osakana2025 .sec02_notes {
  font-size: 14px;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec02_notes {
    font-size: 1.4vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec02_notes {
    font-size: 3.2vw;
  }
}

/*--------------
セクション03
--------------*/

#osakana2025 .sec03 {
    background: linear-gradient(to right, #f7e5b2, #fff7e1, #f7e5b2);
} 

#osakana2025 .sec03_wrap {
  position: relative;
  padding: calc(150/1024*100%) 0 calc(120/1024*100%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_wrap {
    padding: calc(250/670*100%) 0 calc(160/670*100%);
  }
}

#osakana2025 .sec03_ttl {
  width: calc(1142/1024*100%);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  margin: calc(-133/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_ttl {
    width: calc(750/670*100%);
    margin: calc(-270/670*100%) auto 0;
  }
}

#osakana2025 .sec03_slash {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--ff_yakuhan);
  color: #492410;
  line-height: 1;
  text-align: center;
  position: relative;
  margin: 0 auto;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec03_slash {
    font-size: 2.8vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_slash {
    font-size: 6.4vw;
    line-height: 1.3;
  }
}

#osakana2025 .sec03_slash p{
  display: inline-block;
  padding: 0 .4em;
}

#osakana2025 .sec03_slash span {
  font-size: 70%;
}

#osakana2025 .sec03_slash::before,
#osakana2025 .sec03_slash::after {
  content: "";
  position: absolute;
  width: calc(18/1024*100%);
  padding-top: calc(24/1024*100%);
  background: url(/cp/osakana2025/img/slash_pc.png) no-repeat center center / cover;
  top: 50%;
  transform: translate(-50%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_slash::before,
  #osakana2025 .sec03_slash::after {
    width: calc(46/670*100%);
    padding-top: calc(71/670*100%);
    background: url(/cp/osakana2025/img/slash_sp.png) no-repeat center center / cover;
    top: auto;
    bottom: 0;
  }
}

#osakana2025 .sec03_slash::before {
  margin: -.3em 0 0 -.15em; 
}

#osakana2025 .sec03_slash::after {
  margin: -.35em -.1em 0 0; 
  transform: scale(-1, 1);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_slash::before {
    margin: 0 0 0 -.15em; 
  }

  #osakana2025 .sec03_slash::after {
    margin: 0  -.1em 0 0; 
  }
}

#osakana2025 .sec03_category_wrap {
  width: calc(818/1024*100%);
  margin: calc(30/1024*100%) auto 0;
  display: flex;
  justify-content: center;
  gap:calc(40/1024*100%);
  list-style: none;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_category_wrap {
    width: 100%;
    margin: calc(40/670*100%) auto 0;
    flex-direction: column;
    gap:5.3vw;
  }
}

#osakana2025 .sec03_category_wrap li {
  width: calc(389/818*100%);
  filter:drop-shadow(6px 6px 6px rgba(53, 0, 2, .3));
  will-change: filter;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_category_wrap li {
    width: 100%;
    filter:drop-shadow(.8vw .8vw .8vw rgba(53, 0, 2, .3));
    will-change: filter;
  }
}

#osakana2025 .sec03_notes {
  width: calc(818/1024*100%);
  list-style: none;
  margin: 1em auto 0;
}

#osakana2025 .sec03_notes li {
  font-size: 16px;
  line-height: 1.5;
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec03_notes li {
    font-size: 1.6vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_notes {
    width: 100%;
    margin: 2em auto 0;
  }

  #osakana2025 .sec03_notes li {
    font-size: 3.2vw;
  }
}

#osakana2025 .sec03_oubo_container {
  width: 100%;
  margin-top: calc(70/1024*100%);
  background-color: var(--color_white);
  border-radius: 20px;
  padding: calc(35/1024*100%) calc(80/1024*100%) calc(80/1024*100%);
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_oubo_container {
    margin-top: calc(70/670*100%);
    background-color: var(--color_white);
    border-radius: 2.6vw;
    padding: calc(35/670*100%) calc(40/670*100%) calc(80/670*100%);
  }
}

#osakana2025 .sec03_ttl_oubo {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--color_red);
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec03_ttl_oubo {
    font-size: 2.8vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_ttl_oubo {
    font-size: 5.3vw;
  }
}

#osakana2025 .sec03_ttl_oubo::before,
#osakana2025 .sec03_ttl_oubo::after {
    background-color: var(--color_red);
    content: "";
    flex-grow: 1;
    height: 2px;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_ttl_oubo::before,
  #osakana2025 .sec03_ttl_oubo::after {
      height: .5vw;
  }
}

#osakana2025 .sec03_ttl_oubo::before {
  margin-right: 0.5em;
}

#osakana2025 .sec03_ttl_oubo::after {
  margin-left: 0.5em;
}

#osakana2025 .sec03_step_wrap {
  width: 100%;
  margin-top: calc(35/864*100%);
  display: flex;
  flex-direction: column;
  font-family: var(--ff_yakuhan);
}

#osakana2025 .sec03_step_wrap li.step_list {
  margin-bottom: 1.5em;
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_step_wrap li.step_list {
    margin-bottom: 2em;
    flex-direction: column;
    gap: 0;
  }
}

#osakana2025 .sec03_step_wrap li.step_list .step {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color_red);
  color: var(--color_white);
  border-radius: 9999px;
  padding: .2em 1em;
  line-height: 1;
}

#osakana2025 .sec03_step_wrap li.step_list .step span {
  font-size: 130%;
  margin-left: .2em;
  margin-bottom: .1em;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec03_step_wrap li.step_list .step {
    font-size: 2.0vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_step_wrap li.step_list .step {
    font-size: 4vw;
  }
}

#osakana2025 .sec03_step_wrap li.step_list .step_how {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  flex: 1;
  padding-top: .15em;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec03_step_wrap li.step_list .step_how {
    font-size: 2.0vw;
    padding-top: .5em;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_step_wrap li.step_list .step_how {
    font-size: 4.2vw;
    padding-top: .5em;
  }
}

#osakana2025 .sec03_btn_oubo a {
  border-radius: 9999px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  margin: calc(40/964*100%) auto 0;
}

#osakana2025 .sec03_btn_oubo a {
  background: var(--color_red);
  max-width: calc(380/864*100%);
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec03_btn_oubo a {
    font-size: 2.4vw;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_btn_oubo a {
    font-size: 4.2vw;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    margin: calc(40/590*100%) auto 0;
  }

  #osakana2025 .sec03_btn_oubo a {
    max-width: calc(500/590*100%);
  }
}

#osakana2025 .sec03_btn_oubo a:hover {
  opacity: .5;
}

#osakana2025 .sec03_btn_oubo a:after {
  content: '';
  width: 16px;
  height: 16px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 1em;
  transition: 0.3s ease-in-out;
}

@media screen and (max-width: 1000px) {
  #osakana2025 .sec03_btn_oubo a:after {
    content: '';
    width: 1.6vw;
    height: 1.6vw;
    border-top: .4vw solid #fff;
    border-right: .4vw solid #fff;
  }
}

@media screen and (max-width: 767px) {
  #osakana2025 .sec03_btn_oubo a:after {
    content: '';
    width: 2.1vw;
    height: 2.1vw;
    border-top: .6vw solid #fff;
    border-right: .6vw solid #fff;
  }
}