@charset "utf-8";
/* --------------------------------------------------
header
-------------------------------------------------- */
#gnav .gnav_list li.gnav_plan a::before {
  background-color: #ffffff;
  height: 2px;
}
#gnav .gnav_list li.gnav_plan a span::after {
  transform: scale(1, 1);
  height: 2px;
}

/* --------------------------------------------------
contents
-------------------------------------------------- */
.main_in {
  padding-top: 50px;
}
@media screen and (min-width: 768px){
  .main_in {
    padding-top: 100px;
  }
}

.bnr-ugoclo{
    margin-bottom: 50px;
    text-align: center;    
}


@media screen and (min-width: 768px){
  .bnr-ugoclo{
    margin-bottom: 90px; 
  }
  .bnr-ugoclo a{
    transition: .3s;  
  }
  .bnr-ugoclo a:hover{
    opacity: .7;  
  }
}

/* plan_box
------------------------------ */
.plan_box {
  background-color: #f5f5f5;
}
.plan_type {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-grow: 1;
  background-color: #e5e5e5;
  color: #595959;
}

.s_plan_list .plan_box .plan_type {
  width: 13%;
  height: 100%;
  background-color: #868a95;
  color: #ffffff;
}

.plan_type .s_s {
  font-size: 47%;
}
.plan_type .menu {
    font-size: 47%;
}

.plan_box_detail .plan_icn {
  width: calc(100% - 80px);
  position: absolute;
  right: 15px;
  top: 15px;
  text-align: right;
}

.plan_icn li {
  background-color: #e0cd7e;
  margin-left: 5px;
  margin-bottom: 5px;
  font-size: 10px;
  font-size: 1.0rem;
  line-height: 1;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  padding: 0 15px;
  height: 20px;
  border-radius:10px;
}

.plan_icn li.strong{
  background-color: #994b4b;
  margin-left: 5px;
  margin-bottom: 5px;
  line-height: 1;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  padding: 0 15px;
  height: 20px;
  border-radius:10px;
  color: #fff;
  position: relative;
  overflow: hidden;	
}

.strong::after {
  content: "";
  display: block;
  width: 20px;
  height: 100%;
  position: absolute;
  top: -100px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: strong 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: strong 4s ease-in-out infinite;
}
@keyframes strong {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes strong {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

.plan_spec_madori {
  color: #08316d;
  font-size: 38px;
  font-size: 3.8rem;
  line-height: .5;
  border-bottom: 1px solid rgba(8,49,109,.3);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.plan_spec_madori .s_m {
  font-size: 76%;
}
.plan_spec_madori .s_s {
  font-size: 36%;
  line-height: 1.4;
  margin-top: 10px;
}
.plan_spec_menseki {
  color: #08316d;
  font-size: 38px;
  font-size: 3.8rem;
  line-height: .8;
}

.s_plan_list .plan_spec_menseki {
  font-size: 46px;
  font-size: 4.6rem;
}

.plan_spec_menseki .s_m {
  font-size: 56%;
}
.plan_spec_menseki .s_s,
.plan_spec_kakaku .s_s{
  font-size: 24%;
  line-height: 1.2;
  color: #08316d;
}

.s_plan_list .plan_spec_menseki .s_s:first-child{
  width: 7em;
  font-size: 30%;
}
.s_plan_list .plan_spec_menseki .s_s:last-child{
  font-size: 35%;
}

.plan_spec_menseki .logo{
  width: 200px;
  padding-top: 20px;
}
.plan_spec_kakaku{
  /* font-size: 38px;
  font-size: 3.8rem; */
  color: #994b4b;
  /* color: #08316d; */
  line-height: .8;
  margin-top: 15px;
  font-size: 5.2rem;
  background-color: #fff;
  margin-top: 50px;
  padding: 10px 0;
}
.plan_spec_kakaku .kakaku_box{
  margin-right: auto;
  margin-left: auto;
  display: table;
  /* width: 82%;
  max-width: 137px; */
}
.plan_spec_kakaku .s_m{
  font-size: 36%;
  line-height: 1.4;
  padding-left: 2px;
}
.plan_spec_kakaku .s_s .s_s {
  font-size: 70%;
}
.plan_spec_kakaku + .plan_spec_madori{
  margin-top: 25px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.plan_spec .logo{
  max-width: 200px;
  margin-top: 25px;
}
@media screen and (min-width: 768px){
  .plan_type {
    width: 90px;
    height: 90px;
    font-size: 34px;
    font-size: 3.4rem;
  }

  .plan_type .menu {
    font-size: 1.6rem;
    margin-top: 1rem;
  }
  .plan_icn {
    width: calc(100% - 90px);
  }
  .s_plan_list .plan_icn {
    width: 100%;
    margin-top: 25px;
  }
  .plan_icn li {
    font-size: 13px;
    font-size: 1.3rem;
    height: 30px;
    border-radius:15px;
  }
  .plan_icn li.strong {
    font-size: 14px;
    font-size: 1.4rem;
    height: 30px;
    border-radius:15px;
  }	
  .plan_spec_madori {
    font-size: 56px;
    font-size: 5.6rem;
  }
  .plan_spec_madori .s_s {
  font-size: 32%;
  line-height: 1.4;
  margin-top: 10px;
}
}

@media screen and (min-width: 1000px) and (max-width: 1200px){
  .s_plan_list .plan_spec_menseki{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

}



/* plan_hanrei
------------------------------ */
.plan_hanrei p {
  display: inline-block;
  margin-right: 15px;
  font-size: 10px;
  font-size: 1.0rem;
}
.plan_hanrei p img {
  width: 32px;
  margin-right: 5px;
  vertical-align: middle;
}
.plan_hanrei .sto,
.plan_hanrei .heat {
  position: relative;
  padding-left: 37px;
}
.plan_hanrei .sto::after,
.plan_hanrei .heat::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 10px;
  background-color: #e5d6bd;
  transform: translateY(-50%);
}
.plan_hanrei .heat::after {
  
}

/* plan_list
------------------------------ */
.s_plan_list .plan_box {
  margin-bottom: 30px;
}
.s_plan_list .plan_box a {
  display: block;
  padding-bottom: 20px;
  background: linear-gradient(135deg, #eeeeee 0%, #f5f5f5 25%, #fefefe 66%, #eeeeee 100%);
  background-size: 400%;
  transition: all 1s;
  border: 1px solid #cfcfcf;
}

.s_plan_list .plan_box .plan_box_wrap{
  padding: 0 16% 0 17%;
}

.s_plan_list .plan_box .plan_box_inn {
  padding: 25px 0;
}
.s_plan_list .plan_box .plan_zu {
  width: 100%;
  margin: 30px auto 10px;
  text-align: center;
}
.s_plan_list .plan_box .plan_zu img {
  max-width: 100%;
}
.s_plan_list .plan_box .c-btn-line {
  width: 12%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #e2edf3;
}
.s_plan_list .plan_box .c-btn-line-in {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-45%, -50%);
}
.c-btn-line .c-btn-arr{
  width: 30px;
  margin-left: 0;
}

.s_plan_list .c-btn-line .c-btn-line-in::after{
  height: 0px;
}


@media screen and (min-width: 768px){
  .s_plan_list .plan_box {
    display: flex;
    margin-bottom: 50px;
  }
  .s_plan_list .plan_box a {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
  }
  .s_plan_list .plan_box .plan_box_wrap{
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    padding: 0 17% 0 18%;
  }
  .s_plan_list .plan_box .plan_box_inn {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 0 0;
  }

  .s_plan_list .plan_box .c-btn-line{
    transition: .5s;
  }
  .s_plan_list .plan_box a:hover .c-btn-line{
    background: #dbedf7;
  }
  .s_plan_list .plan_box .plan_spec {
    width: 100%;
  }
  .s_plan_list .plan_box .plan_zu {
    width: 50%;
    margin: 0;
  }
  .plan_spec_menseki{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  .c-btn-line .c-btn-arr{
    width: 40px;
    margin-left: 0;
  }

}
@media screen and (min-width: 1000px){
  .s_plan_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
  }
  .s_plan_list .plan_box {
    width: 47.83%;
  }
  .s_plan_list .plan_box .plan_box_inn {
    display: flex;
    justify-content: flex-start;
    padding: 20px 0 0;
  }
}
@media screen and (min-width: 1200px){
  .s_plan_list .plan_box a:hover {
    background-position: 100% 50%;
  }
}

/* plan_box_detail
------------------------------ */
.plan_box_detail {
  position: relative;
  padding-bottom: 40px;
  margin-bottom: 30px;
}
.plan_box_detail .plan_box_inn {
  width: 85%;
  margin: 0 auto;
  padding-top: 85px;
}
.plan_box_detail .plan_spec_menseki_2 {
  font-size: 87.5%;
  color: #595959;
  margin: 20px 0;
}
.plan_box_detail .plan_zu {
  text-align: center;
}
.plan_box_detail .plan_zu img {
  max-width: 529px;
  width: 100%;
}
@media screen and (min-width: 768px){
  .plan_box_detail {
    padding-bottom: 80px;
  }
  .plan_box_detail .plan_box_inn {
    padding-top: 130px;
  }
  .plan_box_detail .plan_type {
    width: 100px;
    height: 100px;
    font-size: 38px;
    font-size: 3.8rem;
  }
  .plan_box_detail .plan_icn {
    right: 40px;
    top: 40px;
  }
  .plan_box_detail .plan_spec_madori {
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .plan_box_detail .plan_spec_madori,
  .plan_box_detail .plan_spec_menseki {
    font-size: 64px;
    font-size: 6.4rem;
    display: block;
  }
  .plan_box_detail .plan_spec_menseki_2 {
    margin: 40px 0;
  }
}
@media screen and (min-width: 1200px){
  .plan_box_detail .plan_box_inn {
    display: flex;
    justify-content: space-between;
  }
  .plan_box_detail .plan_spec {
    width: 35%;
    padding-top: 60px;
  }
  .plan_box_detail .plan_zu {
    width: 60%;
  }
}

.nav_plan_type {
	text-align: center;
	padding: 50px 0 40px;
}
.nav_plan_type li {
  display: inline-block;
}
.nav_plan_type a {
  display: inline-block;
  padding: 8px 13px;
  position: relative;
  font-size: 150%;
  line-height: 1;
  text-decoration: underline;
}
.nav_plan_type a::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 25%;
  width: 1px;
  height: 50%;
  background-color: #000000;
}
.nav_plan_type a.here {
  color: #808080;
  text-decoration: none;
}
.nav_plan_type .s_s {
  font-size: 60%;
  letter-spacing: 0;
}
.nav_plan_type li:last-child a::after {
  display: none;
}

@media screen and (min-width: 768px){
  .nav_plan_type {
    padding: 60px 0 30px;
  }
  .nav_plan_type a {
    padding: 10px 20px;
  }
}
/* plan_a
------------------------------ */

.kado h1{
    font-size: 1.6rem;
    font-weight: normal;
    text-align: center
}
.kado h1 strong{
    color: #002063;
    font-size: 2.2rem;
    font-weight: bold;
    font-family: 'Oswald', YakuHanJP_Noto, 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothicM", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", sans-serif;
}

.kado p.img1{
    padding: 20px 0 0 0
}
.kado p.img2{
    padding: 20px 0 0 0
}

@media screen and (min-width: 768px){
.kado h1{
    font-size: 2.2rem;
}
.kado h1 strong{
    font-size: 2.8rem;
}

.kado p.img1{
    padding: 40px 0 0 0
}
.kado p.img2{
    padding: 100px 0 0 0
}
}
/* plan_c
------------------------------ */
.pc{display: block;}
.sp{display: none;}
.plan_box .flex{
  width: calc(100% - 90px);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 40px;
}
.plan_box .flex_in{
  width: 48.5%;
  background-color: #fff;
  padding: 40px 30px;
}
.plan_box .flex_in:last-of-type{
  padding: 40px 20px;
  text-align: center;
}
.flex_in p:first-of-type img{
  width: 258px;
  margin-bottom: 10px;
}
.flex_in:last-of-type p:first-of-type img{
  width: 484px;
}
.flex_in p{
  position: relative;
}
.flex_in p span{
  position: absolute;
  right: 5px;
  bottom: 0;
  color: #fff;
  font-size: 1.1rem;
}
.flex_in .small_ttl{
  line-height: 1.4;
}
/* kichen */
.flex_in .small{
  display: flex;
  margin-top: 20px;
}
.flex_in .small p img{
  width: 100%;
  margin-bottom: 0;
}
.flex_in .small .txt{
  width: 50%;
  padding-left: 20px;
}
.flex_in .small .txt .smaill_ttl{
  font-size: 2rem;
}
.flex_in .small .txt p:last-of-type{
  padding-top: 7px;
  font-size: 1.4rem;
  line-height: 1.6;
}

/* ugoclo */
.flex_in:last-of-type p span{
  color: #000;
}
.flex_in:last-of-type p img{
  width: 100%;
}
.flex_in:last-of-type p:first-of-type,
.flex_in:last-of-type p:nth-of-type(2){
  padding: 0 10px;
}
.flex_in:last-of-type p:nth-of-type(2) span{
  right: 15px;
}
.flex_in:last-of-type p:nth-of-type(3){
  margin-top: -40px;
}
.flex_in:last-of-type p:nth-of-type(3) span,
.flex_in:last-of-type p:nth-of-type(4) span{
  /* right: 0; */
  bottom: -15px;
}
.flex_in:last-of-type p:nth-of-type(4){
  margin-top: 20px;
}

.fbox{
  background: #fff;
}

.clm1{
  width: calc(100% - 90px);
  margin: 40px auto 0;
  padding: 40px 30px;
}

.walldoor_ttl img{ 
  margin-bottom: 10px;
}
.clm1 .flex{
  width: 100%;
  align-items: center;
}
.plan_box .clm1 .flex_in{
  width: 45%;
  padding: 0;
}
.plan_box .clm1 .flex_in_arw{
  width: 8%;
  padding: 0 1%;
}
.clm1 .flex_in:last-of-type p:first-of-type img,
.clm1 .flex_in p:first-of-type img {
  width: 100%;
  margin-bottom: 0;
}
.clm1 .flex_in:last-of-type p:first-of-type,
.clm1 .flex_in:last-of-type p:nth-of-type(2){
  padding: 0;
}
.clm1 .flex_in p span{
  right: auto;
  left: 5px;
  color: #000!important;
}

@media screen and (max-width: 768px){
  .pc{display: none;}
  .sp{display: block;}
  .plan_box .flex{
    flex-direction: column;
    width: 90%;
  }
  .plan_box .flex_in{
    width: 100%;
  }
  .plan_box .flex_in:first-of-type{
    margin-bottom: 25px;
  }
  .flex_in p span{
    font-size: 1rem;
  }
  .flex_in:last-of-type p:nth-of-type(3) span, .flex_in:last-of-type p:nth-of-type(4) span{
    font-size: 1rem;
  }
  /* kichen */
  .flex_in p.kichen_ttl img{
    width: 85%;
  }
  .flex_in .small_ttl{
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .flex_in .small .txt p:last-of-type{
    font-size: 93.75%;
    line-height: 1.6;
  }
  .flex_in .small{
    flex-direction: column;
  }
  .flex_in .small .txt{
    width: 100%;
    padding-left: 0;
    order: 1;
  }
  .flex_in .small div:first-of-type{
    order: 2;
    margin-top: 10px;
  }
  /* ugoclo */
  .flex_in:last-of-type p:nth-of-type(3){
    margin-top: 15px;
  }
  .flex_in:last-of-type p:first-of-type img{
    width: 85%;
  }


  .clm1{
    width: 90%;
    margin-top: 25px;
    padding: 40px 20px;
  }
  
  .walldoor_ttl img{ 
    width: 156px;
  }
  .clm1 .flex{
    width: 100%;
    flex-direction: column;
  }
  .plan_box .clm1 .flex_in{
    width: 100%;
  }
  .plan_box .clm1 .flex_in_arw{
    width: 20%;
    padding: 5% 0;
    transform: rotate(90deg);
    max-width: 100px;
    min-width: 60px;
  }
  .plan_box .clm1 .flex_in:first-of-type{
    margin-bottom: 0;
  }
  .clm1 .flex_in:last-of-type p:first-of-type,
  .clm1 .flex_in:last-of-type p:nth-of-type(2){
    padding: 0;
  }



}


/*タブ分け*/
/* --------------------------------------------------
contents
-------------------------------------------------- */

.sec-plan{
	padding: 10px 0 40px;	
}
.sec-plan .tab-nav{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
  gap: 16px;
}
.sec-plan .tab-nav li{
	width: calc(50% - 5px);
	border:solid #08316D;
	border-width: 0 1px 1px 0;
  display: flex;
  align-content: center;
  align-items: stretch;
  flex-grow: 1;
}
.sec-plan .tab-nav li span{
	display:flex;
  justify-content: center;
  flex-grow: 1;
  align-items: center;
	transform: translate(-3px,-3px);
	padding: 15px;
	border: 1px solid #08316D;
	background: #FFF;
	color: #08316D;
	text-align:center;
	font-size: 1.4rem;
	line-height:1.2;
	font-weight: 500;
	cursor:pointer;	
}
.sec-plan .tab-nav li.active span{
	background: #08316D;
	color: #E0CD7E;
}
.sec-plan .plan-cont{
	display: none;
	width: calc(100% + 30px);
	transform: translateX(-15px);
}
.sec-plan .plan-cont.active{
	display:block;	
}
.sec-plan .plan-cont img:first-child{
    margin-bottom: 20px
}


@media screen and (min-width: 768px){

	.sec-plan .tab-nav{
		max-width: 600px;
		margin: 0 auto 20px;
	}
	.sec-plan .tab-nav li{
		width: calc(50% - 8px);
	}
	.sec-plan .tab-nav li span{
		padding: 20px;
		font-size: 1.8rem;
		transition:.2s;
	}
	.sec-plan .tab-nav li:hover span{
		transform: translate(1px,1px);	
	}
	.sec-plan .plan-cont{
		width: 100%;
		transform: none;
	}

}

/*他ページ導線*/
.nav_plan_other{
    margin: 60px 0 0;
}
.nav_plan_other ul{
    display: block;
}
.nav_plan_other ul li{
    margin: 0 0 20px;
}
.nav_plan_other ul li img{
    width: 100%
}

@media screen and (min-width: 768px){

.nav_plan_other{
    margin: 80px 0 0;
}
.nav_plan_other ul{
    display: flex;
    justify-content: space-between
}
.nav_plan_other ul li{
    margin: 0 0 0 0;
    width: 32%
}
.nav_plan_other ul li img{

}

}


/*返済例*/
.loan {
	border:1px solid rgba(8,49,109,.3);
}
.loan .st {
	background: #08316d;
	color: #FFF;
	text-align: center;
	font-size: 1.8rem;
	padding: 8px 0;
}
.loan .in {
	padding: 10px 20px;
}
.loan .st2 {
	color: #000;
	text-align: center;
	font-size: 1.8rem;
	padding: 6px 0;
	border-bottom:solid 1px #CCC;
	margin:12px 0 5px 0;
}
.loan .st3 {
	color: #000;
	text-align: center;

	padding: 6px 0;
	border-bottom:solid 1px #CCC;
	margin:12px 0 5px 0;
}
.loan .price {
	color:#000;
	text-align: center;
	font-size: 2.4rem;
	line-height: 1.2;
	margin: 0 0 15px 0;
	font-weight: bold;
}
.loan .price strong {
	color:#7B0002;
	text-align: center;
	font-size: 5.5rem;
	line-height: 1.2;
	margin: 0 0 15px 0;
}
.loan .price2 {
	color:#7B0002;
	text-align: center;
	font-size: 3.4rem;
	line-height: 1.2;
	margin: 0 0 15px 0;
}
.loan .price3 {
	text-align: center;
	line-height: 1.2;
	margin: 0 0 15px 0;
}
@media only screen and (max-width: 768px){
.loan .st {
	font-size: 1.4rem;
}
.loan .st2 {
	font-size: 1.4rem;
}
.loan .price {
	font-size: 1.8rem;
}
.loan .price strong {
	font-size: 2.9rem;
}
.loan .price2 {
	font-size: 2.0rem;
}
}