@charset "utf-8";

/* 共通設定
========================================================================== */
html {
  font-size: 62.5%; /* 10px */
}
html::-webkit-scrollbar{
  display:none;
}
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
  max-width: 1200px;
  height: 100vh;
  margin-inline: auto;
	color: #333;
  font-size: 1.6rem;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
a {
	color: #333;
	text-decoration: none;
}
img {
	vertical-align: bottom;
}
ul,
ol {
	list-style: none;
}

.wrapper {
  width: 100%;
  height: 880vw;
  box-shadow: 0 0 1.3333333333333335vw rgba(0,0,0,0.16);
  position: relative;
  background: url("../images/bg_main_s.webp") no-repeat top center / cover;
}


/* SP・PC 表示切替え
---------------------------------------------------------- */
@media screen and (min-width: 751px){
	.is-pc { display: block; }
	.is-sp { display: none; }
}
@media screen and (max-width: 750px){
	.is-pc { display: none; }
	.is-sp { display: block; }
}

/* タグ
---------------------------------------------------------- */
#tag {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (min-width: 751px) {
.wrapper {
  width: min(calc(1200 * 100vw / 1200), 1200px);
  height: min(320.83333333333337vw, 3850px);
  box-shadow: 0 0 min(calc(10 * 100vw / 1000), 10px) rgba(0,0,0,0.16);
  background: url("../images/bg_main.webp") no-repeat top center / cover;
}
}


/* header
========================================================================== */
#header {
  margin-bottom: 4.8vw;
}
@media screen and (min-width: 751px) {
#header {
  margin-bottom: min(1.6666666666666667vw, 20px);
}
}

/* main
========================================================================== */
.main_inner {
  padding: 18.133333333333333vw 15.86vw 0 22.93vw;
}
.main_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-rows: auto 46px auto 52px auto 50px auto 50px auto 52px auto 48px auto 1400px auto; */
  grid-template-rows: auto 6.13vw auto 6.93vw auto 6.67vw auto 6.67vw auto 6.13vw auto 6.4vw auto 16vw auto;
  gap: 0 3.5vw;
}
.main_item {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.main_item:nth-child(n+1):nth-child(-n+2) {
  grid-row: 1/2;
}
.main_item:nth-child(n+3):nth-child(-n+4) {
  grid-row: 3/4;
}
.main_item:nth-child(n+5):nth-child(-n+6) {
  grid-row: 5/6;
}
.main_item:nth-child(n+7):nth-child(-n+8) {
  grid-row: 7/8;
}
.main_item:nth-child(n+9):nth-child(-n+10) {
  grid-row: 9/10;
}
.main_item:nth-child(n+11):nth-child(-n+12) {
  grid-row: 11/12;
}
.main_item:nth-child(n+13):nth-child(-n+14) {
  grid-row: 13/14;
}
.main_item:nth-child(n+15){
  grid-row: 15/16;
}
/* .main_item {
  grid-row: 15/16;
} */
.main_item:last-child {
  grid-column: -3 / -1;
}
:is(.box_year, .box_order, .box_recommend) {
  cursor: pointer;
  clip-path: inset(-1.07vw -2.67vw -0.13vw -0.53vw);
}
:is(.box_year, .box_recommend) {
  background: #fff;
  background: linear-gradient(135deg, #fff 0%, #E5E5E5 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:is(.box_year, .box_recommend) img {
  filter: invert(41%) sepia(15%) saturate(7%) hue-rotate(11deg) brightness(93%) contrast(88%);
}
:is(.box_year, .box_recommend):hover {
  background: #FA8500;
  background: linear-gradient(135deg, #FA8500 0%, #E35200 100%);
}
:is(.box_year, .box_recommend):hover img {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(156deg) brightness(106%) contrast(106%);
}
.box_year {
  width: 17.33vw;
  height: 6.67vw;
  position: relative;
  left: 2.13vw;
  box-shadow: 0.29vw 0 0.29vw rgba(0,0,0,0.45);
}
.box_year img {
  width: 9.44vw;
}
.box_year-text {
  display: none;
}
.box_order {
  width: 28.8vw;
  filter: drop-shadow(1.07vw 1.07vw 0.53vw rgb(0 0 0 / 45%));
}
.box_recommend {
  width: 53.87vw;
  height: 29.33vw;
  filter: drop-shadow(0 0 0 rgb(0 0 0 / 0%));
  box-shadow: 1.07vw 1.07vw 0.53vw rgba(0,0,0,0.45);
  gap: 2.1333333333333333vw;
}
.box_recommend img {
  width: 24.933333333333334vw;
}
.box_recommend p {
  font-size: 4.4vw;
  letter-spacing: .1em;
  line-height: 1.45;
  font-weight: 700;
  color: #686868;
}
.box_recommend p span {
  display: inline-block;
  width: 4.27vw;
  height: 4.27vw;
  position: relative;
  top: 0.4vw;
  left: 0.4vw;
  border-radius: 50%;
  background: #F88100;
}
.box_recommend p span::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 1.68vw;
  height: 2.13vw;
  background: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.box_recommend:hover p {
  color: #fff;
}
.box_recommend:hover p span {
  background: #fff;
}
.box_recommend:hover p span::after {
  background: #E65900;
}
.item_not_exist {
  cursor: initial;
  position: relative;
}
.item_not_exist img {
  filter: brightness(70%);
}
.item_not_exist::after {
  content: "";
  background: url("/media/digital_kizunabako/images/ico_lock.svg") no-repeat 0 0 / contain;
  width: 4.71vw;
  height: 5.03vw;
  position: absolute;
  top: 18.67vw;
  left: 8.53vw;
}

/* usage */
.main_usage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2vw;
}
.main_usage-desc {
  font-size: 4vw;
  line-height: 1.8;
  color: #686868;
}
.main_usage-btn {
  width: 66.66666666666666vw;
  cursor: pointer;
  transition: opacity .3s;
}
.main_usage-btn p {
  padding: 1.6vw 0;
  font-size: 3.733333333333334vw;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-radius: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FF6A31;
  color: #fff;
  background-color: #FF6A31;
}
.main_usage-btn:hover p {
  color: #FF6A31;
  background-color: #fff;
}

/* kizunabako */
.main_kizunabako {
  padding-top: 16vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.333333333333334vw;
}
.kizunabako_desc {
  font-size: 4vw;
  text-align: center;
  line-height: 2;
  color: #686868;
}
.kizunabako_bnr {
  width: 80vw;
}


@media screen and (min-width: 751px) {
.main_inner {
  padding: min(10.833333333333334vw, 130px) min(14.75vw, 177px) 0 min(16.416666666666664vw, 197px);
}
.main_list {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto min(4.5vw, 54px) auto min(4.833333333333333vw, 58px) auto min(4.833333333333333vw, 58px) auto min(4.583333333333333vw, 55px) auto;
  gap: 0 min(1.6666666666666667vw, 20px);
}
.main_item {
  flex-direction: row;
  align-items: flex-end;
  gap: min(1.25vw, 15px);
}
.main_item:nth-child(n+1):nth-child(-n+3) {
  grid-row: 1/2;
}
.main_item:nth-child(n+4):nth-child(-n+6) {
  grid-row: 3/4;
}
.main_item:nth-child(n+7):nth-child(-n+9) {
  grid-row: 5/6;
}
.main_item:nth-child(n+10):nth-child(-n+12) {
  grid-row: 7/8;
}
.main_item:nth-child(n+13):nth-child(-n+15) {
  grid-row: 9/10;
}
.main_item:last-child {
  grid-column: initial;
  grid-column: -2 / -1;
}
:is(.box_year, .box_order, .box_recommend) {
  clip-path: inset(-8px -20px -1px -4px);
}
.box_year {
  width: min(6.666666666666667vw, 80px);
  height: min(9.166666666666666vw, 110px);
  left: initial;
  box-shadow: 8px 8px 4px rgba(0,0,0,0.45);
}
.box_year img {
  width: min(4.5vw, 54px);
}
.box_year-text {
  font-size: min(1.25vw, 15px);
  font-weight: bold;
  line-height: 1.33;
  letter-spacing: 0.12em;
  color: #fff;
  padding-top: min(0.6666666666666667vw, 8px);
}
.box_year:hover .box_year-text {
  display: block;
}
.box_order {
  width: min(12.833333333333332vw, 154px);
  filter: drop-shadow(8px 8px 4px rgb(0 0 0 / 45%));
}
.box_recommend {
  width: min(17.583333333333336vw, 211px);
  height: min(13.333333333333334vw, 160px);
  gap: min(0.6666666666666667vw, 8px);
  box-shadow: 8px 8px 4px rgba(0,0,0,0.45);
}
.box_recommend img {
  width: min(9vw, 108px);
}
.box_recommend p {
  font-size: min(1.6666666666666667vw, 20px);
}
.box_recommend p span {
  width: min(1.6666666666666667vw, 20px);
  height: min(1.6666666666666667vw, 20px);
  top: min(0.33333333333333337vw, 3px);
  left: min(0.33333333333333337vw, 3px);
}
.box_recommend p span::after {
  width: min(0.6666666666666667vw, 8px);
  height: min(0.8333333333333334vw, 10px);
}
.item_not_exist::after {
  width: min(2.9166666666666665vw, 35px);
  height: min(3.166666666666667vw, 38px);
  top: min(8.333333333333332vw, 100px);
  left: min(3.3333333333333335vw, 40px);
}

/* usage */
.main_usage {
  gap: min(1.6666666666666667vw, 20px);
}
.main_usage-desc {
  font-size: min(1.6666666666666667vw, 20px);
}
.main_usage-btn {
  width: min(31.666666666666664vw, 380px);
}
.main_usage-btn p {
  padding: min(0.6666666666666667vw, 8px) 0;
  font-size: min(1.8333333333333333vw, 22px);
  border-radius: min(1.6666666666666667vw, 20px);
}

/* kizunabako */
.main_kizunabako {
  padding-top: min(8.333333333333332vw, 100px);
  gap: min(2vw, 24px);
}
.kizunabako_desc {
  font-size: min(1.9166666666666665vw, 23px);
}
.kizunabako_bnr {
  width: min(62.5vw, 750px);
  transition: all .3s;
}
.kizunabako_bnr:hover{
  opacity: .7;
}
}

/* footer
========================================================================== */
.footer_inner{
  position: absolute;
  left: 0;
  bottom: calc(65 * 100vw / 750);
  width: 100%;
  text-align: center;
}
.footer_btn {
  margin: 0 auto calc(267* 100vw / 750);
  width: calc(580* 100vw / 750);
  display: flex;
  flex-direction: column;
  gap: calc(36* 100vw / 750);
}
.footer_btn a{
  position: relative;
  padding: calc(16* 100vw / 750) 0;
  font-size: calc(38* 100vw / 750);
  font-weight: 700;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: calc(44* 100vw / 750);
}
.footer_btn-arrow {
  position: relative;
  left: calc(8* 100vw / 750);
  width: calc(38* 100vw / 750);
  height: calc(38* 100vw / 750);
  border-radius: 50%;
  background: #ffffff;
}
.footer_btn-arrow::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: calc(15* 100vw / 750);
  height: calc(20* 100vw / 750);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.footer_btn-top,
.footer_btn-top .footer_btn-arrow::after {
  background: #EE0000;
}
.sns_list {
  display: flex;
  justify-content: center;
  gap: 0 calc(16* 100vw / 750);
} 
.sns_item {
  position: relative;
  display: inline-block;
  width: calc(60* 100vw / 750);
  height: calc(60* 100vw / 750);
  transition: .3s all;
}
/* bottom */
.bottom {
  margin-top: calc(24 * 100vw / 750);
}
:is(.bottom,.bottom a) {
  font-size: calc(24 * 100vw / 750);
  letter-spacing: .02em;
  color: #fff;
}
.bread_list {
  display: flex;
  justify-content: center;
  margin-bottom: calc(8 * 100vw / 750);
}
.bread_item:not(:last-child)::after {
  padding: 0 calc(8 * 100vw / 750);
  content: "＞";
}
.copyright {
  text-align: center;
}
.copyright_link {
  text-decoration: underline;
}
.copyright_link:hover {
  text-decoration: none;
}

@media screen and (min-width: 751px) {
.footer_inner{
  bottom: min(calc(220 * 100vw / 1200), 220px);
}
.footer_btn {
  margin: 0 auto min(calc(200 * 100vw / 1200), 200px);
  width: min(calc(500 * 100vw / 1200), 500px);
  gap: min(calc(36 * 100vw / 1200), 36px);
}
.footer_btn a {
  padding: min(calc(12 * 100vw / 1200), 12px) 0 min(calc(14 * 100vw / 1200), 14px);
  font-size: min(calc(32 * 100vw / 1200), 32px);
  border-radius: calc(44* 100vw / 750);
  transition: .3s all;
}
.footer_btn-arrow {
  top: min(calc(1* 100vw / 1200), 1px);
  left: min(calc(8 * 100vw / 1200), 8px);
  width: min(calc(32 * 100vw / 1200), 32px);
  height: min(calc(32 * 100vw / 1200), 32px);
}
.footer_btn-arrow::after {
  width: min(calc(15 * 100vw / 1200), 15px);
  height: min(calc(18 * 100vw / 1200), 18px);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.footer_btn-top:hover{
  filter: brightness(1.2);
}

.sns_list {
  display: flex;
  justify-content: center;
  gap: 0 min(calc(16 * 100vw / 1200), 16px);
}
.sns_item {
  position: relative;
  display: inline-block;
  width: min(calc(36 * 100vw / 1200), 36px);
  height: min(calc(36 * 100vw / 1200), 36px);
  transition: .3s all;
}
/* bottom */
.bottom {
  margin-top: min(calc(36 * 100vw / 1200), 36px);
}
:is(.bottom,.bottom a) {
  font-size: min(calc(16 * 100vw / 1200), 16px);
  letter-spacing: .04em;
}
.bread_list {
  margin-bottom: min(calc(4 * 100vw / 1200), 4px);
}
.bread_item:not(:last-child)::after {
  padding: 0 min(calc(8 * 100vw / 1200), 8px);
}
.bread_item a:hover {
  text-decoration: underline;
}
}

/* modal
========================================================================== */
/* 共通設定
--------------------------------------------------------- */
:is(#modal_login,.modal) {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.68);
  overflow-y: auto;
  transition: all 0.2s;
}
:is(#modal_login,.modal).is-show {
  opacity: 1;
  visibility: visible;
}
.modal__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}
.modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}
.modal__container {
  position:relative;
  top: 6vh;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 1.6vw;
}
.modal__headding {
  padding-bottom: 3.2vw;
  display: flex;
}
.modal__close {
  margin-left: auto;
  width: calc(33* 100vw / 750);
  cursor: pointer;
  flex-shrink: 0;
}
.modal__main {
  padding-bottom: 6.67vw;
  height: 100%;
  max-height: calc(100vh - 46.66vw);
  overflow-y: overlay;
}

@media screen and (min-width: 751px) {
.modal__container {
  top: 6vh;
  border-radius: min(1vw, 12px);
}
.modal__headding {
  padding-bottom: min(1.33vw, 16px);
}
.modal__close {
  width: min(2vw, 24px);
}
.modal__close:hover {
  opacity: .7;
}
.modal__main {
  max-height: calc(100vh - min(21.66vw, 260px));
}
}

/* 非ログイン時
--------------------------------------------------------- */
#modal_login .modal__container {
  padding: 4vw;
  width: 86.67vw;
}
#modal_login .modal_login-title {
  margin-bottom: 5.33vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.67vw 0;
}
#modal_login .modal_login-title dt {
  width: 58.67vw;
} 
#modal_login .modal_login-title dd {
  font-size: 3.47vw;
  line-height: 1.7;
  letter-spacing: .02em;
  text-align: center;
}
#modal_login #error {
  text-align: center;
}
#modal_login .login {
  display: flex;
  justify-content: center;
}
#modal_login .form {
  width: 66.67vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#modal_login .form.-mail {
  margin-bottom: 2.13vw;
}
#modal_login .form.-password {
  margin-bottom: 5.33vw;
}
#modal_login .login .form th{
  font-size: 2.93vw;
  font-weight: bold;
  color: #F88100;
}
#modal_login .login .form td,
#modal_login .lowin .form td input {
  width: 100%;
  height: 8vw;
}
#modal_login td input[type="text"],
#modal_login td input[type="password"] {
  width: 100%;
  height: 100%;
  border-radius: 1.06vw;
  border: 2px solid #F88100;
}
#modal_login .submit input[type="submit"] {
  display: block;
  color: #FFF;
  margin: 0 auto;
  padding: 0;
  text-decoration: none;
  width: 100%;
  height: 9.33vw;
  font-size: 4vw;
  font-weight: bold;
  background: #F88100;
  border-radius: 1.07vw;
  -webkit-border-radius: 1.07vw;
  -moz-border-radius: 1.07vw;
  border: 1px solid;
  cursor: pointer;
}
#modal_login .submit input[type="submit"]:hover {
  background: #E65900;
}
#modal_login .pass {
  margin-bottom: 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.33vw 0;
}
#modal_login .btn {
  margin-bottom: 4.8vw;
}
#modal_login .pass a{
  font-size: 2.93vw;
  font-weight: bold;
  color: #2692FF;
}
#modal_login .login_usage {
  margin: 0 auto 5.333333333333334vw;
  width: 69.33333333333334vw
}
#modal_login .login_usage-btn {
  padding: 0.8vw 0;
  font-size: 4.266666666666667vw;
  font-weight: 700;
  text-align: center;
  border: 3px solid #F88100;
  border-radius: 4vw;
  color: #F88100;
  cursor: pointer;
}
#modal_login .login_top {
  display: flex;
  justify-content: center;
}
#modal_login .login_top a {
  font-size: 3.47vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal_login .login_top a span{
  width: 3.86vw;
  height: 3.86vw;
  position: relative;
  left: 0.4vw;
  border-radius: 50%;
  background: #F88100;
}
#modal_login .login_top a span::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 1.6vw;
  height: 2vw;
  background: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

@media screen and (min-width: 751px) {
#modal_login .modal__container {
  padding: min(2.5vw, 30px);
  width: min(54.17vw, 650px);
}
#modal_login .modal__main {
  padding-bottom: min(1.5vw, 18px);
}
#modal_login .modal_login-title {
  margin-bottom: min(1.5vw, 18px);
  gap: min(0.66vw, 8px) 0;
}
#modal_login .modal_login-title dt {
  width: min(26.67vw, 320px);
} 
#modal_login .modal_login-title dd {
  font-size: min(1.33vw, 16px);
}
#modal_login .form {
  width: min(258vw, 300px);
}
#modal_login .form.-mail {
  margin-bottom: min(0.5vw, 6px);
}
#modal_login .form.-password {
  margin-bottom: min(2.5vw, 30px);
}
#modal_login .login .form th{
  font-size: min(1.42vw, 17px);
}
#modal_login .login .form td,
#modal_login .login .form td input {
  width: 100%;
  height: min(3.3333333333333335vw, 40px);
}
#modal_login td input[type="text"],
#modal_login td input[type="password"] {
  border-radius: min(0.5vw, 6px);
}
#modal_login .submit input[type="submit"] {
  height: min(3.6666666666666665vw, 44px);
  font-size: min(1.42vw, 17px);
  border-radius: min(0.5vw, 6px);
  -webkit-border-radius: min(0.5vw, 6px);
  -moz-border-radius: min(0.5vw, 6px);
}
#modal_login .btn {
  margin-bottom: min(1.66vw, 20px);
}
#modal_login .pass {
  margin-bottom: min(1.5vw, 18px);
  gap: min(0.5vw, 6px) 0;
}
#modal_login .pass a{
  font-size: min(1vw, 12px);
}
#modal_login .login_usage {
  margin: 0 auto min(2vw, 24px);
  width: min(26.666666666666668vw, 320px);
}
#modal_login .login_usage-btn {
  padding: min(0.4166666666666667vw, 5px) 0;
  font-size: min(1.5vw, 18px);
  border: 2px solid #F88100;
  border-radius: min(1.6666666666666667vw, 20px);
}
#modal_login .login_usage-btn:hover {
  background: #F88100;
  color: #fff;
}
#modal_login .login_top a {
  font-size: min(1.33vw, 16px);
}
#modal_login .login_top a span{
  width: min(1.33vw, 16px);
  height: min(1.33vw, 16px);
  left: min(0.57vw, 6.8px);
}
#modal_login .login_top a span::after {
  width: min(0.58vw, 7px);
  height: min(0.67vw, 8px);
}
}

/* ログイン時
--------------------------------------------------------- */
:is(#modal_order,#modal_history,#modal_recommend,#modal_usage) .modal__container {
  padding: 4vw;
  width: 86.67vw;
}
:is(#modal_order,#modal_history) .modal__main {
  padding-top: 3.73vw;
}
:is(#modal_order,#modal_history) .modal__main table {
  width: 100%;
}
:is(#modal_order,#modal_history,#modal_recommend) .modal__container::before {
  content: "";
  width: 4vw;
  height: 9.33vw;
  border-radius: 1.6vw 0 0 0;
  position: absolute;
  left: 0;
  top: 0;
  background: #F88100;
}
:is(#modal_order,#modal_history) .modal__zodiac {
  padding-left: 2.67vw;
}
:is(#modal_order,#modal_history) .modal__zodiac img{
  width: 40.26vw;
}
:is(#modal_order,#modal_history) dl{
  position: relative;
  z-index: 10;
}
.modal dt {
  font-size: 4.53vw;
  font-weight: 900;
  letter-spacing: .05em;
  color: #F88100;
}
.modal dd {
  font-size: 4.53vw;
  line-height: 1.67;
}
.modal__icon {
  position: absolute;
  top: 0%;
  left: 60%;
  width: 28vw;
  z-index: -1;
}
.modal__switch {
  margin-inline: auto;
  width: 75.73vw;
  position: relative;
  padding: 1.73vw 0;
  border-radius: 10.4vw;
  font-size: 4.53vw;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #F88100;
  cursor: pointer;
  transition: all .3s;
}
.modal__switch-arrow {
  position: relative;
  left: 1.6vw;
  width: 4.53vw;
  height: 4.53vw;
  border-radius: 50%;
  background: #ffffff;
}
.modal__switch-arrow::after {
  content: "";
  width: 2vw;
  height: 2.4vw;
  position: absolute;
  top: 50%;
  left: 58%;
  background: #F88100;
  transform: translate(-50%, -50%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
/* modal_history */
#modal_history .history__event {
  margin-bottom: 6.67vw;
  padding: 0 1.33vw;
}
#modal_history dt {
  margin-bottom: 0.8vw;
}
#modal_history .history__event p{
  text-indent: -1em;
  padding-left: 1em;
}
#modal_history .modal__switch {
  margin-top: 12.8vw;
}
/* modal_order */
.order__container {
  margin-bottom: 13.33vw;
  display: flex;
  flex-direction: column;
  gap: 4.26vw 0;
}
.order__images {
  margin-inline: auto;
  width: 66.67vw;
}
.order__images img{
  box-shadow: 0.66vw 0.66vw 3.33vw rgba(0,0,0,0.45);
}
.order__information {
  padding: 0 1.33vw;
}
:is(.order__number,.order__creator,.order__point) {
  margin-bottom: 2.67vw;
}
:is(.order__number,.order__creator) dd{
  font-size: 5.33vw;
}
.order__creator dd span {
  padding-left: 3.2vw;
  font-size: 3.47vw;
}
.order__keyword dt{
  margin-bottom: 2.4vw;
}
.order__keyword dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4vw 5.86vw;
}
.order__keyword dd a {
  padding: 1.86vw 5.86vw;
  font-size: 4vw;
  font-weight: 700;
  border-radius: 3.33vw;
  color: #FFF;
  background: #EE0000;
  transition: .3s all;
}

/* modal_recommend */
#modal_recommend .modal__main {
  max-height: calc(100vh - 80.66vw);
}
#modal_recommend .modal__zodiac {
  padding-left: 2.67vw;
  font-size: 4.266666666666667vw;
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: flex-start;
  gap: 0 4.266666666666667vw;
}
#modal_recommend .modal__zodiac span {
  display: flex;
  gap: 1.6vw;
}
#modal_recommend .modal__zodiac img {
  width: 14.93vw;
}
/* おすすめデザイン */
#modal_recommend .recommend_desc {
  font-size: 4.266666666666667vw;
  font-weight: 900;
  text-align: center;
  letter-spacing: .03em;
}
#modal_recommend .recommend_wrap {
  padding-top: 6.4vw;
}
#modal_recommend .suggest_list {
  padding-bottom: 8vw;
}
#modal_recommend .suggest_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8vw;
}
#modal_recommend .suggest_list li {
  width: 34vw;
  box-shadow: 0 0 1.33vw rgba(0,0,0,0.45);
  transition: .3s all;
}
#modal_recommend .suggest_list li:nth-child(n + 5) {
  display: none;
}
/* おすすめキーワード */
#modal_recommend .keyword_summary-desc {
  margin-bottom: 3.733333333333334vw;
  font-size: 4.133333333333333vw;
  font-weight: 900;
  text-align: center;
  color: #F88100;
}
#modal_recommend .keyword_summary-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4vw 5.86vw;
}
#modal_recommend .keyword {
  padding: 1.86vw 5.86vw;
  font-size: 4vw;
  font-weight: 700;
  border-radius: 3.33vw;
  color: #FFF;
  background: #EE0000;
  transition: .3s all;
}
/* トップへ戻る */
#modal_recommend .recommend__link {
  padding-top: 4vw;
}
#modal_recommend .recommend__link a {
  margin-inline: auto;
  width: 75.73vw;
  transition: all .3s;
}
#modal_recommend .recommend__link-top {
  position: relative;
  padding: 1.6vw 0;
  border-radius: 1.6vw;
  font-size: 4.39vw;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #EE0000;
}
#modal_recommend .recommend__link-arrow {
  position: relative;
  left: 1.6vw;
  width: 3.2vw;
  height: 3.2vw;
  border-radius: 50%;
  background: #ffffff;
}
#modal_recommend .recommend__link-arrow::after {
  content: "";
  width: 1.6vw;
  height: 2vw;
  position: absolute;
  top: 50%;
  left: 58%;
  background: #EE0000;
  transform: translate(-50%, -50%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  transition: all .3s;
}
@media (max-height: 667px) {
  .modal__container {
    margin-bottom: 9vh;
  }
  .modal__main {
    max-height: initial;
}
}


@media screen and (min-width: 751px) {
/* ログイン後モーダル共通 */
:is(#modal_order,#modal_history,#modal_recommend,#modal_usage) .modal__container {
  padding: min(2.5vw, 30px);
  width: min(83.33vw, 1000px);
}
:is(#modal_order,#modal_history,#modal_recommend,#modal_usage) .modal__main {
  padding: min(4.8vw, 36px) min(2.5vw, 30px) min(2.5vw, 30px) min(2.5vw, 30px);
}
:is(#modal_order,#modal_history,#modal_recommend,#modal_usage) .modal__container::before {
  content: "";
  width: min(0.83vw, 10px);
  height: min(5.83vw, 70px);
  border-radius: 0;
  left: min(5vw, 60px);
}
:is(#modal_order,#modal_history) .modal__zodiac {
  padding-left: min(5vw, 60px);
}
:is(#modal_order,#modal_history) .modal__zodiac img{
  width: min(25.17vw, 302px);
}
.modal dt {
  font-size: min(1.67vw, 20px);
  letter-spacing: 0;
}
.modal dd {
  font-size: min(1.67vw, 20px);
  line-height: 2;
}
.modal__icon {
  width: min(16.67vw, 200px);
}
.modal__switch {
  width: min(29.17vw, 350px);
  padding: min(0.625vw, 7.5px) 0;
  border-radius: min(3.17vw, 48px);
  font-size: min(1.75vw, 21px);
}
.modal__switch:hover {
  background: #E65900;
}
.modal__switch-arrow {
  left: min(0.63vw, 7.6px);
  width: min(1.75vw, 21px);
  height: min(1.75vw, 21px);
}
.modal__switch-arrow::after {
  width: min(0.83vw, 10px);
  height: min(1vw, 12px);
}
.modal__switch:hover .modal__switch-arrow::after {
  background: #E65900;
}

/* modal_history */
#modal_history .history__event {
  margin-bottom: min(3.33vw, 40px);
  padding: initial;
}
#modal_history dt {
  margin-bottom: min(0.5vw, 6px);
  font-size: min(2vw, 24px);
  letter-spacing: .05em;
}
#modal_history dd {
  font-size: min(1.83vw, 22px);
}
#modal_history .modal__switch {
  margin-top: min(6.25vw, 75px);
}
#modal_history .modal__icon {
  top: 0%;
  left: 80%;
}

/* modal_order */
.order__container {
  margin-bottom: min(6vw, 60px);
  display: grid;
  grid-template-columns: min(26.67vw, 320px) auto;
  gap: 0 min(6vw, 60px);
}
.order__images {
  margin-top: auto;
  margin-bottom: auto;
  width: min(26.67vw, 320px);
}
.order__images img{
  box-shadow: min(0.25vw, 3px) min(0.25vw, 3px) min(1.67vw, 20px) rgba(0,0,0,0.45);
}
.order__information {
  padding: initial;
}
:is(.order__number,.order__creator,.order__point) {
  margin-bottom: min(1.5vw, 18px);
}
:is(.order__number,.order__creator) dd{
  font-size: min(2vw, 24px);
}
.order__creator dd span {
  padding-left: min(2.92vw, 35px);
  font-size: min(1.5vw, 18px);
}
.order__keyword dt{
  margin-bottom: min(0.5vw, 6px);
}
.order__keyword dd {
  gap: min(1.67vw, 20px);
}
.order__keyword dd a {
  padding: min(0.42vw, 5px) min(2.16vw, 26px);
  font-size: min(1.42vw, 17px);
  border-radius: min(1.25vw, 15px);
}
.order__keyword dd a:hover {
  opacity: .7;
}
#modal_order .modal__icon {
  top: 0%;
  left: 60%;
}

/* modal_recommend */
#modal_recommend .modal__main {
  max-height: calc(100vh - min(21.66vw, 260px));
}
#modal_recommend .modal__zodiac {
  padding-left: min(5vw, 60px);
  font-size: min(2.67vw, 32px);
  gap: 0 min(1.33vw, 16px);
}
#modal_recommend .modal__zodiac span {
  gap: min(1vw, 12px);
}
#modal_recommend .modal__zodiac img{
  width: min(9.33vw, 112px);
}
/* おすすめデザイン */
#modal_recommend .recommend_desc {
  font-size: min(1.9166666666666665vw, 23px);
}
#modal_recommend .recommend_wrap {
  padding-top: min(3vw, 36px);
}
#modal_recommend .suggest_list {
  padding-bottom: min(4vw, 48px);
}
#modal_recommend .suggest_list ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 min(3.33vw, 40px);
}
#modal_recommend .suggest_list li {
  width: min(12vw, 144px);
  box-shadow: min(0.16vw, 2px) min(0.16vw, 2px) min(0.83vw, 10px) rgba(0,0,0,0.45);
}
#modal_recommend .suggest_list li:nth-child(n + 5) {
  display: block;
}
#modal_recommend .suggest_list li:hover {
  opacity: .7;
}
/* おすすめキーワード */
#modal_recommend .keyword_summary-desc {
  margin-bottom: min(1vw, 12px);
  font-size: min(1.6666666666666667vw, 20px);
}
#modal_recommend .keyword_summary-inner {
  justify-content: center;
  gap: min(1.67vw, 20px);
}
#modal_recommend .keyword {
  padding: min(0.6666666666666667vw, 8px) min(2.666666666666667vw, 32px);
  font-size: min(1.6666666666666667vw, 20px);
  border-radius: min(1.25vw, 15px);
}
#modal_recommend .keyword:hover {
  opacity: .7;
}
/* トップへ戻る */
#modal_recommend .recommend__link {
  padding:min(1.33vw, 16px) 0;
  gap: min(2.67vw, 32px) 0;
} 
#modal_recommend .recommend__link a {
  margin-inline: auto;
  width: min(33.33vw, 400px);
}
#modal_recommend .recommend__link-top {
  padding: min(1.2vw, 9px) 0;
  border-radius: min(1.6vw, 12px);
  font-size: min(2.93vw, 22px);
}
#modal_recommend .recommend__link a:hover {
  opacity: .7;
}
#modal_recommend .recommend__link-arrow {
  left: min(1.2vw, 9px);
  width: min(2.93vw, 22px);
  height: min(2.93vw, 22px);
}
#modal_recommend .recommend__link-arrow::after {
  width: min(1.33vw, 10px);
  height: min(1.6vw, 12px);
}
@media (max-height: 750px) {
  .modal__container {
    margin-bottom: 9vh;
  }
  .modal__main {
    max-height: initial;
}
}
}

/* デジタルきずなばこの使い方
========================================================================== */
.usage_title {
  margin: 0 auto 11.466666666666667vw;
  padding: 2.4vw 0;
  width: 75.73333333333333vw;
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  text-align: center;
  border: 3px solid #FF7A1F;
  border-radius: 4.666666666666667vw;
  color: #FF7A1F;
}
.usage_list {

  display: flex;
  flex-direction: column;
  gap: 10.666666666666668vw 0;
}
.usage_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.8vw 0;
  counter-increment: count 1;
}
.usage_item::before {
  font-family: "Notable", sans-serif;
  content: counter(count) "";
  font-size: 17.6vw;
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
  color: #FF7A1F;
  transform: translateY(-50%);
}
.usage_images {
  width: 76.2667vw;
}
.usage_desc {
  font-size: 4vw;
  letter-spacing: 0;
  line-height: 1.8;
  text-align: justify;
}
#usage__login {
  margin-top: 17.599999999999998vw;
}

@media screen and (min-width: 751px) {
.usage_title {
  margin: 0 auto min(5.333333333333334vw, 64px);
  padding: min(1.1666666666666667vw, 14px) 0;
  width: min(139.166666666666664vw, 470px);
  font-size: min(2.3333333333333335vw, 28px);
  border-radius: min(2.5vw, 30px);
}
.usage_list {
  gap: min(5.333333333333334vw, 64px);
}
.usage_item {
  gap: 0 min(3.3333333333333335vw, 40px);
}
.usage_item:nth-child(odd) {
  flex-direction: row;
}
.usage_item:nth-child(even) {
  flex-direction: row-reverse;
}
.usage_item::before {
  font-size: min(8.333333333333332vw, 100px);
  transform: translateY(-50%);
}
.usage_item:nth-child(even)::before {
  left: initial;
  right: 0;
}
.usage_images {
  width: min(37.5vw, 450px);
}
.usage_desc {
  font-size: min(1.6666666666666667vw, 20px);
}
#usage__login {
  margin-top: min(7.666666666666666vw, 92px);
}
}


/* loading
========================================================================== */
.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  text-align:center;
  background: #fff;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading_main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70vw;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
@media screen and (min-width: 751px) {
  .loading_main {
    width: 40vw;
  }
}

/* ローディング画面アニメーション
---------------------------------------------------------- */
.loading_main {
  animation-delay: 1000ms;
  animation: LoadingAnime;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes LoadingAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}