@charset "utf-8";
/*共通*/
#back-mov {
    position: fixed; /* Fixes the position of the video */
    top: 0;
    left: 0;
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    overflow: hidden; /* Ensures no overflow */
    z-index: -1; /* Keeps video in the background */
}

#back-mov video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire container */
    position: absolute;
    top: 0;
    left: 0;
}
#section0{
	position: relative;
    z-index: 10;
	height: 700px;
    display: block;
}
.top-frame-rect{
    padding-top: 55px;
}
.cls-1 {
	/*opacity:0;*/
	font-size: 3.6vw;
    color: #030038;
    /*font-family: "ゴシックMB101 B";*/
    line-height: 1.8;
	-webkit-text-fill-color: transparent;
	background: linear-gradient(94.13deg,#1b9ba7 40.42%,#2a46ab 100.06%);
    -webkit-background-clip: text;
}
/*
.cls-1 span {
	opacity: 0;
	-webkit-transition: .9s ease-in-out;
	transition: .9s ease-in-out;
}

.cls-1 span {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.3s ease-in-out; 
}

.cls-1 span.visible {
    opacity: 1;
}
*/


h2 {
    color: #333;
	position: relative;
}
h2 span{
	font-size: 45px;
}

.concept-title-sbtitle{
	padding: 0 8px;
	font-size: 20px;
	color: #119ac5;
	font-weight: 600;
	margin-bottom: 0px;
}
.concept-title-maintitle{
    color: #d8d8d0;
    margin-bottom: 0px;
    font-size: 4.9rem;
    font-family: "Hind",sans-serif;
    font-weight: 600;
}
.L3-W01{
  max-width: 1500px;
}
.section-line {
    height: 2px;
    position: relative;
    overflow: hidden;
	margin-bottom: 90px;
}
.section-line:before {
    content: "";
    display: block;
    width: 19.3236714976vw;
    height: 2px;
    background: #0ca8c0;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-100%) scaleX(0);
    transition: transform cubic-bezier(.23,1,.32,1) 1s;
    transform-origin: center left;
    z-index: 1;
    will-change: transform;
}
.section-line.show:before {
    transform: translate(0) scaleX(1);
    transition-delay: .1s;
}
ol, ul {
    list-style: none;
}


/*トップ*/
.lp-top-title{
	position: absolute;
    top: 0px;
	max-width: 485px;
}
.top-frame{
	position: relative;
    width: 100%;
    /*min-height: 100vh;*/
}
#lp-top-content{
    position: absolute;
    top: 275px;
    padding-left: 9px;
	max-width: 600px;
}
#lp-top-content p{
    line-height: 2;
    color: #091948;
    font-family: source-han-sans-japanese, sans-serif;
	letter-spacing: .5px;
    /*font-style: normal；*/
    font-size: 2.1rem;
    /*font-family: HCo Gotham SSm,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDPGothic,Meiryo,sans-serif;*/
}


/*導入までの流れ*/
.step-frame{
	position: relative;
	opacity: 0;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
}
.step-frame.is-show2{
	opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

.arrow-fram01{
	position: relative;
    display: block;
    padding: 6px 0;
}
.scrollbox3 .step {
    display: inline-block;
   	/*background-color: #0c93be;*/
	background: linear-gradient(
	320deg
	, #01cadc 0%, #01cadc 40%, #00a6dc 60%, #00a6dc 100%);
    color: #fff;
    position: relative;
    z-index: 1;
    letter-spacing: 0.05em;
    font-size: 18px;
    line-height: 2;
    line-height: 1.2;
    padding: 4px 14px 2px;
}
.step-frame .arrow {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: #231815;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform-origin: left;
	transform-origin: 0% 50%;
    transform: translate(0px, 0px);
}
.step-frame .arrow .arrow-triangle {
    position: absolute;
    top: -3px;
    right: 11px;
    width: 21px;
    height: 21px;
    border-top: 1px solid #231815;
    border-right: 1px solid #231815;
    -webkit-transform: rotate(45deg) translateY(-50%);
    -moz-transform: rotate(45deg) translateY(-50%);
    -ms-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
	opacity: 1;
}
.step-frame .arrow .arrow-triangle.last {
    position: absolute;
    opacity: 1;
    top: 0;
    right: 0;
    width: 1px;
    height: 21px;
    background-color: #231815;
    -webkit-transform: rotate(0deg) translateY(-50%);
    -moz-transform: rotate(0deg) translateY(-50%);
    -ms-transform: rotate(0deg) translateY(-50%);
    transform: rotate(
0deg) translateY(-50%);
}
.step-text{
	text-align: justify;
    margin: 0 auto;
	transform: translate(0px, -8px);
    opacity: 1;
	font-size: 1.6rem;
	line-height: calc(36 / 16);
	letter-spacing: -0.01em;
}
.step-text span{
	color: #00a6dc;
}
.step-title{
	width: 100%;
    max-width: 200px;
    margin: 0 auto;
    position: relative;	
    text-align: center;
}
.step-title::before {
    content: '';
    display: block;
    padding-top: 20%;
    top: 0;
    left: 0;
}
.step-frame h3{
	color: #0f9ecc;
    font-weight: bold;
    text-align: center;
    font-size: 2.1rem;
    line-height: calc(56 / 36);
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.step-img-fram{
    width: 170px;
	position: relative;
	border-radius: 50%;
	height: 170px;
	background: #f8f8f8;
	margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
.img-e-text{
	text-align: center;
    font-size: 15px;
	font-weight: 500;
}
.scrollbox3 .table td, .table th {
    border-top: none; 
}
.step-frame .step-img01{
	opacity: 1;
	text-align: center;
	padding-top: 16px;
}
.table .h-td{
	height: 80px;
}


/*料金プラン*/
.scrollbox2{
	padding: 0px 60px 130px;
	position: relative;
	z-index: 6;
}
.L3-features-02 .concept-title-explanation{
	letter-spacing: -0.01em;
	font-size: 1.6rem;
	line-height: calc(36 / 16);
	margin: 2em 0 1em;
}
#section02 .plan-panel{
	border-radius: 5px;
    background-color: white;
    box-shadow: 0px 20px 29px 8.4px rgb(48 145 179 / 20%);
	/*width: 430px;*/
	/*margin: 0 36px;*/
}
#monthly-cost-frame{
	transform: translateY(-50%);
}
/*通常
.monthly-cost {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: #0f9ecc;
	width: 335px;
	margin: 0 auto;
	margin-top: -30px;
}
*/
.monthly-cost {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: #0f9ecc;
	width: 350px;
	margin: 0 auto;
}


.monthly-cost .unit {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
}
/*
通常
.monthly-cost .num {
    padding: 0 15px;
    font-style: normal;
    line-height: 1.1;
    font-size: 6.6rem;
	font-family: new-order, sans-serif;
}
*/
.monthly-cost .num {
    padding: 0 15px;
    font-style: normal;
    line-height: 1.1;
    font-size: 3.6rem;
	font-family: new-order, sans-serif;
}
.monthly-cost .tax {
    position: absolute;
    right: -12px;
    top: 0;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
}
.monthly-cost .yen {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
}
.plan-panel #initial{
	color: #07a4db;
    text-align: center;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.plan-panel{
	position: relative;
}
.plan-panel .title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin-top: 22px;*/
	margin-top: 55px;
    color: #0f9ecc;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 500;
    /*font-size: 2rem;*/
	font-size: 3rem;
}
.plan-panel .title::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin-top: 8px;
    background-color: #0f9ecc;
}
.plan-panel img{
	width: 100%;
    height: auto;
}
#section02 ul{
	display: flex;
    justify-content: center;
	margin-bottom: 50px;
	padding-left: 0px;
}
.plan-panel .recommend-icon{
	position: absolute;
    top: 0;
    right: 0;
    transform: translate(42.5%, -53%);
    width: calc(calc(120 / 1280) * 100vw);
    min-width: 100px;
    max-width: 120px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0px 30px 60.2px 9.8px rgb(48 145 179 / 20%);
}
.plan-panel #function{
	font-size: 1.7rem;
    padding: 0.1em 0.2em;
    width: 82px;
    text-align: center;
    background: linear-gradient( 141deg, #00a6dc 0%, #01cadc 100%);
    color: white;
}
.plan-panel table{
	font-size: 2rem;
}
.plan-panel td{
	position: relative;
}
.plan-panel tr td:before {
	font-family: FontAwesome;
	content: "\f138";
	position: absolute;
	left: 0.1em;
	color: skyblue;
}
.table td, .table th {
    padding-left: 30px;
	border-top: unset;
}
.at-s{
	/*width: calc(calc(900 / 1280) * 100vw);*/
	width: calc(calc(500 / 1280) * 100vw);
    /*max-width: 900px;*/
    font-size: 1.7rem;
	color: #1f8fb3;
	margin: 0 auto 35px;
}
#function-frame{
	max-width: 500px;
    margin: -13px auto 50px;
}
.scrollbox3 {
	padding: 0px 60px 120px;
    position: relative;
    z-index: 6;
    /*background-color: #edfbff87;
	background-color: #ffffff85;*/
	background-color: #ffffff;
}
/*料金ページ*/

.plan-panel2 #function2{
	font-size: 1.7rem;
    padding: 0.1em 0.2em;
    width: 134px;
    text-align: center;
    background: linear-gradient( 141deg, #00a6dc 0%, #01cadc 100%);
    color: white;
}
#function-frame2 {
    max-width: 700px;
    margin: -13px auto 50px;
}
#section02 .plan-panel2 {
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 20px 29px 8.4px rgb(48 145 179 / 20%);
}
.plan-panel2 .title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 55px;
    color: #0f9ecc;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 500;
    font-size: 3rem;
}
.plan-panel2 #initial {
    color: #07a4db;
    text-align: center;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.plan-panel2 table{
    width: 100%;
	font-size: 1.6rem;
    border-collapse: collapse;
}
.plan-panel2 th,
.plan-panel2 td{
    padding: 16px;
    font-weight: normal;
	display: block;
}
.plan-panel2 th{
	background-color: #a9d6e3;
	color: #004085;
}
.plan-panel2 td{
    background-color: #fbf9f9;
}
.accordion_one{
	font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.accordion_area .accordion_one .ac_header {
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 1.5rem 4rem 1.5rem 2rem;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition: .2s;
}
.accordion_area .accordion_one .ac_header:not(.open):hover {
  background-color: #f1f8ff;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header {
  background-color: #f5f5f5;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover {
  background-color: #f1f8ff;
}
.accordion_area .accordion_one .ac_header .i_box {
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}
.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}
.accordion_area .accordion_one .ac_header .i_box:before {
  border-top: 2px solid #014897;
  width: 20px;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
  border-left: 2px solid #014897;
  width: 0;
  height: 20px;
  top: 0;
  bottom: 0;
  right: 9px;
  transition: .3s;
}
.accordion_area .accordion_one .ac_header.open .i_box:after {
  height: 0;
}
.accordion_area .accordion_one .ac_inner {
  display: none;
  padding: 1.5rem 2rem 1.5rem 2rem;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  background: #fff;
}
@media screen and (max-width: 736px) {
  .accordion_area .accordion_one .ac_header {
    padding: 1.5rem 2rem 1.5rem 1.0rem;
  }
  .accordion_area .accordion_one .ac_header .i_box {
    right: 0.8rem;
    width: 15px;
    height: 15px;
    margin-top: -7px;
  }
  .accordion_area .accordion_one .ac_header .i_box:before {
    width: 15px;
  }
  .accordion_area .accordion_one .ac_header .i_box:after {
    height: 15px;
    right: 7px;
  }
  .accordion_area .accordion_one .ac_inner {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
}

/*=========
faq
=========*/

.p-faq__headinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}

.p-faq__headinner p.p-faq__q-txt {
	font-size: 20px;
	margin-bottom: 0px;
}

.p-faq__bodyinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}

.p-faq__bodyinner p.p-faq__a-txt {
	font-size: 20px;
	margin-bottom: 0px;
}
.campaign_price{
    position: absolute;
    top: -72px;
    font-weight: 500;
    font-size: 3.1rem;
}
.campaign_bold{
    font-size: 4.6rem;
    margin-left: 10px;
}
.monthly_campaign_box{
    width: 350px;
    margin: 0 auto;
    position: relative;
}
.monthly_campaign_title{
    background-color: #d8b858;
    color: white;
    font-size: 1.9rem;
    padding: 3px 15px;
    display: inline-block;
    font-style: italic;
    animation: backgroundAnimation 5s infinite alternate;
    position: absolute;
    top: -107px;
}
@keyframes backgroundAnimation {
    0% {
        background-color: #d8b858; /* 初期色 */
    }
    50% {
        background-color: #dbc471; /* やや明るめの色 */
    }
    100% {
        background-color: #d8b858; /* 戻り色 */
    }
}




@media screen and (min-width: 960px){
.plan-panel3 {
    width: min(1140px,48%);
}
}


@media screen and (max-width: 736px) {
  .p-faq__bodyinner {
    padding-left: 0px;
  }
  .p-faq__bodyinner::before {
    font-size: 15px;
  }
  .p-faq__bodyinner p.p-faq__a-txt {
    font-size: 15px;
  }
  .p-faq__headinner {
    padding-left: 0px;
  }
  .p-faq__headinner::before {
    font-size: 15px;
  }
  .p-faq__headinner p.p-faq__q-txt {
    font-size: 15px;
  }
}


/*おすすめ*/
.scrollbox4 {
	position: relative;
	z-index: 6;
	padding: 0px 60px 120px;
}
.L3-features-02{
	text-align: center;
}
.recommendImg{
	width: 90%;
    height: auto;
}
.re-frame-text{
	letter-spacing: -0.01em;
    font-size: 1.6rem;
    line-height: calc(36 / 16);
	width: 572px;
	margin: 0 auto;
}

/*特長*/
.L3-features-01 {
    text-align: center;
}
.scrollbox{
	background-color: #fefefe;
	position: relative;
    z-index: 6;
	padding: 0px 60px 60px;
}
#features-img{
	position: relative;
	margin-top: 2em;
}
#features-img ul{
	display: flex;
	/*justify-content: center;*/
	justify-content: space-between;
	padding: 0 20px;
    margin: -190px auto 0;
}
#features-img ul li{
	width: 30%;
	position: relative;
}

#features-img .c-img{
	width: 100%;
    height: auto;
}
#b-img{
    border-radius: 10px;
    box-shadow: -15px 19px 12px 7px rgb(48 145 179 / 10%);
    filter: opacity(75%);
    width: 100%;
    height: auto;
}

#features-img h3{
    color: #354341;
    font-family: HCo Gotham SSm,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDPGothic,Meiryo,sans-serif;
    letter-spacing: .5px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
	text-align: start;
}
#features-img h3 .h3-s1{
    color: #0f9ecc;
}
#features-img h3 .h3-s2{
	font-size: 1.2rem;
    padding-left: 10px;
}
#features-img .f-text{
	letter-spacing: -0.01em;
    font-size: 1.5rem;
    line-height: calc(36 / 16);
    margin: 10px 0 1em;
	text-align: start;
}
#features-img .index{
	color: #308dc1;
	margin-bottom: 0px;
	font-size: 1.2rem;
	text-align: start;
}




.L3-features-03{
	text-align: center;
	margin-bottom: 50px;
}




/*共通animation*/
.fadeIn_up_item{
  opacity: 0;
}
.is-show {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
	  opacity: 0;
	  transform: translateY(100px);
  }
  to {
	  opacity: 1;
	  transform: translateY(0);
  }
}
/*
.load-fade {
	opacity : 0; 
	transition : all 2s;
}
.load-fade.done{
	opacity : 1; 
	transform : translate(0, 0);
}
*/
.TitleToLeft{
	opacity: 0;
    transform: translateX(50px);
    transition: .6s;
}
.TitleToLeft.show {
    opacity: 1;
    transform: translateY(0);
    margin: 0 auto;
}


.features-img{
	width: 40%;
	z-index: 1;
	text-align: center;
}
.features-img img{
	height: 200px;
}
.section-line-l01 {
    display: block;
    width: 100%;
    height: 1px;
    background: #e8ecf0;
    transform: scaleX(0);
    transition: transform cubic-bezier(.23,1,.32,1) 1s;
    transform-origin: center left;
    position: absolute;
    top: 0;
    left: 0;
}
.section-line.show .section-line-l01 {
    transform: scaleX(1);
}
.section-line:after {
    content: "";
    display: block;
    width: 1.2077294686vw;
    height: 2px;
    background: #002c45;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-500%) scaleX(0);
    transition: transform cubic-bezier(.23,1,.32,1) 1s;
    transform-origin: center left;
    z-index: 1;
}
.section-line.show:after {
    transform: translate(0) scaleX(1);
    transition-delay: .5s;
}
.RecomendofadeIn{
	opacity: 0;
	transition: 2s;
}
.RecomendofadeIn.is-show {
  opacity: 1;
}
.difference_table{
	font-size: 1.5rem;
	position: relative;
	width: 80%;
    margin: 70px auto 20px;
}
.difference_table img{
	max-width: 210px;
	width: 100%;
}
.difference_table .th_box{
	background: linear-gradient(300deg, #2670bd 0%, #00a6dc 100%);
	color: #ffffff;
	width: 16%;
    text-align: start;
    height: 120px;
	vertical-align: middle;
    padding: 0px 6px;
	border: 2px solid #fff;
}
.difference_table #difference_table_th_01{
	background-color: #fff;
    border-bottom-color: #cccccc;
	padding: 18px;
	width: 42.2%;
}
.difference_table::before{
	/*border: 4px solid #397BFF;
	border-radius: 20px 20px 0 0;*/
	box-shadow: inset 0 20px 0 #fff;
	content: "";
	position: absolute;
	left: 16%;
	bottom: 0;
	height: calc(100% + 18px);
	width: 42.2%;
    border: 3px solid;
    border-image: linear-gradient(to right, #00a6dc 0%, #01cadc 100%);
    border-image-slice: 1;
}

.difference_table #difference_table_th_02{
	background-color: #999;
    border-bottom-color: #cccccc;
    color: #fff;
	padding: 18px;
    vertical-align: middle;
}
.difference_table tbody td{
	border: 2px solid #eee;
    background: #ffffff;
	vertical-align: middle;
	font-size: 2rem;
	font-weight: bold;
	font-family: Lato,"メイリオ",Meiryo,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	text-align: justify;
	padding: 16px 16px 16px 30px;

}
.difference_table .denominator{
	font-size: 13px;
}
.comment{
	font-weight: normal;
    font-size: small;
    margin-top: 22px;
}
.ex_table{
	font-size: 1.5rem;
    width: 89%;
	margin: 0 auto 35px;
    color: #4c697b;
    font-size: 1.9rem;
}
.ex_table img{
	max-width: 210px;
    width: 100%;
}
.ex_table tbody{
	background-color: #ffffff;
}
.ex_table tbody td{
	font-size: 2rem;
}
.ex_table th{
	text-align: start;
	width: 30%;
}
.ex_table thead th{
	text-align: center;
}
.ex_title{
	position:  relative;
    margin: 0 auto 25px;
}

#annual{
	background-color: aliceblue;
	color: #004085;
}
#search_nen{
	width: 80%;
	text-align: right;
	margin: 0 auto 50px;
    font-size: 1.4rem;
}
#ex_num{
	font-size: 32px;
}
.cp__contents{
    max-width: 441px;
    width: 100%;
    padding: 19px;
    margin: 0 0 18px;
    box-sizing: border-box;
    background: #ffffff;
    border: 3px solid;
    border-image: linear-gradient(to right, #00a6dc 0%, #01cadc 100%);
    border-image-slice: 1;
}
.flex-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.cp__subTitle{
    position: inherit;
    display: inline-block;
    padding-bottom: 12px;
    border-bottom: 1px solid #323232;
    font-size: 2.1rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .36px;
    color: #323232;
}
.cp__title{
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 30px;
    color: #323232;
    position: relative;
	margin-bottom: 0px;
	letter-spacing: 1.3px;
}
.cp__title-caption{
    font-size: 2.2rem;
    font-family: source-han-sans-japanese, sans-serif;
	letter-spacing: normal;
}
.cp__title-fukidashiWrapper{
    position: absolute;
    right: 0;
    top: -24px;
}
.cp__title-fukidashi{
    position: relative;
    display: inline-block;
    padding: 4px 9px;
    max-width: 100%;
    color: #e61e0a;
    font-family: "Noto Sans JP";
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -.1px;
    line-height: 130%;
    text-align: center;
    background: #fffeee;
    border: 1px solid #e61e0a;
    border-radius: 3px;
    box-sizing: border-box;
}
.cp__title-fukidashi:before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    margin-left: -4px;
    border: solid rgba(255, 0, 0, 0);
    border-top: solid red;
    border-width: 8px 4px;
    z-index: 1;
}
.cp__title-style1{
    font-weight: 700;
    letter-spacing: .2px;
}
.cp__title-style2, .cp__title-style3{
    display: inline-block;
    margin-left: -2px;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: .24px;
}
.cp__title-style3{
    letter-spacing: -.1px;
}
.cp__title-fukidashi:after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    margin-left: -4px;
    border: solid hsla(0, 0%, 100%, 0);
    border-top: solid #fffeee;
    border-width: 8px 4px;
    z-index: 2;
}
.cp__supplement{
    margin-top: 6px;
    font-family: "Noto Sans JP";
    color: #6f6f6f;
    font-size: 1.225rem;
}
.cp__title-space {
    display: block;
    margin-top: 6px; 
}
.cp__num{
    font-size: 3.7rem;
}
.cp__c_btn{
  background: #057db7;
  border: 2px solid #057db7;
  border-radius: 60px;
  color: #fff;
  font-weight: bold;
  max-width: 100%;
  padding: 10px 40px;
  text-align: center;
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  font-size: 2rem;
  margin-top: 30px;
  display: flex; 
  justify-content: center; 
  align-items: center;
}
.cp__c_btn:hover{
  background: #fff;
  color: #057db7;
}
.cp__c_btn .text {
    flex-grow: 1; 
    text-align: center;
}
.cp__c_btn .icon {
    flex-shrink: 0; 
    margin-left: auto; 
}
.cp__num{
    font-size: 3.6rem;
    margin: 0px 3px;
    letter-spacing: -2px;
}
.cp__c_btn2{
  background: #f56060;
  border: 2px solid #f56060;
  border-radius: 60px;
  color: #fff;
  display: block;
  font-weight: bold;
  max-width: 100%;
  padding: 10px 40px;
  text-align: center;
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  font-size: 2rem;
  margin-top: 12px;
  display: flex; 
  justify-content: center; 
  align-items: center;
}
.cp__c_btn2:hover{
  background: #fff;
  color: #f56060;
}
.cp__c_btn2 .text {
    flex-grow: 1; 
    text-align: center;
}
.cp__c_btn2 .icon {
    flex-shrink: 0; 
    margin-left: auto; 
}


.l-wrapper_02 {
    margin: 1rem auto;
    width: 500px;
  }
  .card-radius_02{
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    background-color: #ffffff;
  }
  
  .card_02 {
    background-color: #fff;
    box-shadow: 0 0 0px rgba(0, 0, 0, .16);
    color: #212121;
    text-decoration: none;
  }
  
  .card__header_02 {
    display: flex;
    flex-wrap: wrap;
  }
  
  .card__title_02 {
    padding: 1rem 1.5rem 0;
    font-size: 2.25rem;
    order: 1;
    font-weight: bold;
    text-decoration: none;
    border-bottom: solid 3px ;
    border-image: linear-gradient(to right, #00a6dc 0%, #01cadc 100%);
    border-image-slice: 1;
    color: #004085;
  }
  
  .card__thumbnail_02 {
    margin: 0;
    order: 0;
  }
  
  .card__image_02 {
    width: 100%;
  }
  
  .card__body_02 {
    padding: 0 1.5rem;
  }
  
  .card__text_02 {
    font-size: 1.6rem;
    text-align:center;
    text-decoration: none;
  }

  .card__text2_02 {
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
  }
.doubleline {
	color: inherit; 
	text-decoration: line-through;
	text-decoration-color: red; 
}


#cmop_table {
    justify-content: space-between;
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    table-layout: fixed;
    font-family: Rubik, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
  }
.right-table, .mid-table{
    position: relative;
}

#cmop_table #tool1{
    position: relative;
    height: 67px;
    background: #0099FF;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 500;
    background: linear-gradient(230deg, #1179cb 0%, #4d92c9 100%);
}
#cmop_table #tool1::after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(0, 153, 255, 0);
    border-top-width:19px;
    border-bottom-width:19px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color: #4087c7;
    top:100%;
    left:50%;
}
#cmop_table #tool2{
    position: relative;
    height: 67px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 500;
    background: #4c697b;
    line-height: 46.5px;
}
#cmop_table #tool0{
    height: 47px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 500;
    background: #ffffff;
}
#cmop_table #tool2::after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(0, 153, 255, 0);
    border-top-width:19px;
    border-bottom-width:19px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color: #4c697b;
    top:100%;
    left:50%;
}

#cmop_table .left-table .table-item{
    padding: 0px 10px;
    font-size: 1.9rem;
    color: #4c697b;
    font-weight: 500;
    background-color: #f1f1f1;
}

.svg-table-item{
    width: 35px;
}
#cmop_table .table-item-t{
    height: 57px;
}

#cmop_table .colored-border-bottom{
    border-bottom: 1px solid #d2d2d2;
}
#cmop_table p{
    margin-bottom: 0px;
    padding: 20px 0px;
}
#cmop_table .mid-table{
    margin-left: 5px;
}
#cmop_table .right-table{
    margin-left: 5px;
}
#cmop_table .mid-table .table-item{
    padding: 0px 10px;
    font-size: 1.9rem;
    color: #0e76b7;
    font-weight: 500;
    position: relative;
}
#cmop_table .right-table .table-item{
    padding: 0px 10px;
    font-size: 1.9rem;
    color: #4c697b;
    font-weight: 500;
    background-color: #ffffff;
}
#cmop_table {
    display: flex;
    justify-content: space-between; 
    margin-top: 89px;
    /*margin-bottom: 55px;*/
}
#cmop_table .mid-table, #cmop_table .right-table {
    flex: 1; 
}
#cmop_table .title{
    text-align: start;
    padding: 0px 20px 0px 20px;
    display: grid;
    place-items: center; 
    font-weight: bold;
    /*display: flex;
    align-items: center;
    font-weight: bold;*/
}
#cmop_table .left-table .left-table-box{
    background-color: #f1f1f1;
    color: #4c697b;
    width: 232px;
}
#cmop_table .mid-table .mid-table-box{
    background-color: #fefff4;
    border-radius: 8px;
    box-shadow: 2px 7px 15px 0px #90bac8;
}
#cmop_table .right-table .right-table-box{
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 2px 7px 15px 0px #e9e9e9;
}


#cmop_table .num-r{
    font-family: "Fjalla One", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-right: 3px;
    font-size: 3.5rem;
}
#cmop_table .r-nami{
    font-size: 2.1rem;
}
#cmop_table .num-small{
    font-size: 1.2rem;
}
#cmop_table .jp-r{
    font-family: "Fjalla One", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
}
#cmop_table .jp_cho{
    position: relative;
}
#cmop_table .jp_cho::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; 
    width: 100%;
    height: 2px; 
    background-color: red; 
}

#cmop_table .jp_cho::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px; 
    width: 100%;
    height: 2px; 
    background-color: red; 
}
#cmop_table .bi-stars{
    position: absolute;
    top: 6px;
    fill: #ebd185;
    right: 22px;
}
 .right-table, .mid-table {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 各アイテム間を揃える */
    flex: 1; /* 各カラムが同じ幅を取る */
}
.right-table-box, .mid-table-box {
    display: flex;
    flex-direction: column;
    justify-content: stretch; /* アイテムの高さを揃える */
}
#cmop_table .table-item {
    flex-grow: 1; 
    padding: 10px;
    box-sizing: border-box;
}
.h-table-1{height: 93.5px;}
.h-table-2{height: 93.5px;}
.h-table-3{height: 122px;}
.h-table-4{height: 122px;}
.h-table-5{height: 122px;}
.h-table-6{height: 106px;}
.h-table-7{height: 93.5px;}
.h-table-8{height: 93.5px;}
.title-ppt{
    position: absolute;
    top: -75px;
    width: 100%;
}
#hikaku_table{
    font-family: Rubik, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 1.6rem;
    margin: 0 auto;
}
#hikaku_table .table{
    table-layout: fixed;
}
#hikaku_table .name1{
    font-weight: 700;
    font-size: 2.8rem;
    color: #326299;
    margin: 0px 5px;
}
#hikaku_table .name2{
    font-weight: 700;
    font-size: 3.5rem;
    color: #119ac5;
    font-family: "Fjalla One", sans-serif;
    font-weight: 700;
}
#hikaku_table .other-tool{
    position: relative;
    height: 47px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 500;
    background: #4c697b;
}
#hikaku_table #feed-tool{
    position: relative;
    height: 47px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 500;
    background: linear-gradient(230deg, #1179cb 0%, #4d92c9 100%);
}
#hikaku_table tbody th{
    font-size: 1.9rem;
    color: #4c697b;
    font-weight: 500;
    background-color: #f1f1f1;
    font-weight: bold;
    border: 1px solid #d2d2d2;
    vertical-align: middle;
}
#hikaku_table .tool-m-num1{
    background-color: white;
    color: #4c697b;
    border: 1px solid #d2d2d2;
    position: relative;
}
#hikaku_table .tool-m-exa{
    position: absolute;
    bottom: 0px;
    right: 9px;
    font-size: 13px;
}

#hikaku_table .tool-m-num1 span{
    font-family: "Fjalla One", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-right: 3px;
    font-size: 3.5rem;
}

#hikaku_table .tool-m-num2{
    background-color: #fefff4;
    color: #0e76b7;
    border: 1px solid #d2d2d2;
}
#hikaku_table .tool-m-num2 span{
    font-family: "Fjalla One", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-right: 3px;
    font-size: 3.5rem;
}
#hikaku_table .table thead th {
    border-bottom: none; 
}
.modal {
    display: none; 
    position: fixed;
    z-index: 1040;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: relative;
    font-size: 1.6rem;
}

.close {
    color: #ffffff;
    position: absolute;
    top: -42px;
    opacity: unset;
    width: 40px;
    right: 5px;
}
.close2 {
    color: #ffffff;
    position: absolute;
    top: -42px;
    opacity: unset;
    width: 40px;
    right: 5px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    
}
.modal-btn {
    display: inline-flex;
    align-items: center;
    color: #4c697b;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #ffffff;
    outline: none;
}

.modal-btn svg {
    margin-right: 5px;
}
.modal-btn:focus {
    outline: none; 
}
.modal-column {
    flex: 1;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.modal-column h2 {
    margin-bottom: 10px;
    color: #3d9fbf;
    font-weight: bold;
}
.modal-column ul {
    list-style: none;
    padding: 0;
}
.modal-column ul li {
    margin: 5px 0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}
.modal-column ul li:last-child {
    font-weight: bold;
    border-bottom: none;
}
.modal-conatner{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
#modal-biko{
    margin-top: 17px;
    color: #4c697b;
    font-size: 1.2rem;
}

.branch {
    background-color: white;
    text-align: center;
    padding: 10px 20px;
}

.branch #category {
    line-height: 2;
    color: #091948;
    font-family: 'Source Han Sans Japanese', sans-serif;
    letter-spacing: 0.5px;
    font-size: 2.1rem;
    font-weight: bold;
}

.branch .maru {
    font-size: 3.1rem;
    margin: 0 5px;
}

.branch .category-box .tool-title {
    position: relative;
    height: 67px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 46.5px;
}

.branch .category-box #tool2 {
    background: linear-gradient(226deg, #618797 0%, #4c697b 100%);
}

.branch .category-box #tool2::after {
    border-top-color: #587a8b;
}

.branch .category-box #tool1 {
    background: linear-gradient(230deg, #1179cb 0%, #4d92c9 100%);
}

.branch .category-box #tool1::after {
    border-top-color: #4087c7;
}

.branch .category-box .tool-title::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: solid transparent;
    border-width: 19px 10px 0 10px;
    border-top-color: inherit;
}

.branch .category-box .table-item {
    padding: 0 10px;
    font-size: 1.9rem;
    color: #4c697b;
    font-weight: 500;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 2px 7px 15px 0px #90bac8;
    margin-top: ６px;
}

.branch .category-box .table-item ul {
    margin: 0;
    padding: 20px 0;
    list-style: none;
    text-align: left;
}

.branch .category-box .table-item ul li {
    padding: 10px 0;
}

.branch .category-reco-box {
    background-color: #f7fbea;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #d6d6d6;
    margin-bottom: 40px;
}
.branch .category-reco-box h4{
    color: #e6e6e6;
    margin-bottom: 0px;
    font-size: 3rem;
    font-family: "Hind", sans-serif;
    font-weight: 600;
}

.branch .category-reco-box ul {
    padding: 0;
    list-style: none;
    font-size: 1.6rem;
    color: #333333;
    margin: 0;
    line-height: 1.5;
    text-align: start;
}

.branch .category-reco-box ul li {
    padding: 10px 0;
    border-bottom: 2px dashed #d0d7d8;
    font-size: 1.3rem;
    color: #333333;
    margin: 0;
    line-height: 1.5;
}
.branch .category-tt {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 111px;
}

.branch .category-box {
    position: relative;
    flex: 1;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

.branch .tool-frame {
    position: absolute;
    top: -75px;
    width: 100%;
}
.advantages-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.advantages-list li {
    /*margin-bottom: 5px;*/
}
.advantages-list h3 {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    color: #091948;
    margin-bottom: 10px;
    font-weight: bold;

}
.advantages-list p {
    font-size: 1.3rem;
    color: #333333;
    margin: 0;
    line-height: 1.5;
}
.advantages-icons{
    width: 24px;
    height: 24px;
    margin-right: 5px;
}
.category-box .recommend-icon{
    right: 9px;
    width: 100px;
    position: absolute;
    top: -64px;
}
.category-reco-box-title{
    position: relative;
}
.category-reco-box-title p{
    color: #091948;
    font-size: 1.9rem;
    font-weight: bold;
}
.reco-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .reco-list li {
    font-size: 1.6rem;
    color: #333333;
  }
  
  .reco-list li strong {
    font-size: 1.5rem;
    color: #091948;
  }
  .top-catch03{
    font-weight: 700;
    font-size: 1.8rem;
    color: #091948;
    margin-top: 30px;
    margin-bottom: 39px;
    background-color: aliceblue;
    padding: 20px;
    display: flex;
    align-items: center;
  }

#dl-adr table {
    font-size: 1.6em;
    line-height: 1;
}
#dl-adr .table th {
    background-color: #f4f4f4;
    width: 200px;
    padding: 20px 10px;
    vertical-align: middle;
}
#dl-adr .table td {
    background-color: white;
    font-weight: normal;
    padding: 20px 20px;
}
#dl-adr .table .ellipse_inquiry span {
    background-color: #00a0dc;
    color: #fff;
    padding: 3px 6px 5px;
    border-radius: 2px;
    font-weight: normal;
    margin-right: 7px;
    font-size: 1.3rem;
    vertical-align: inherit;
}
#dl-adr .items__m01 {
    width: 100%;
}
#dl-adr .inquiry_form_items {
    background-color: rgb(255, 245, 185);
    border: 1px solid #00a0dc;
    border-radius: 5px;
    outline-color: #9e9e9e;
    padding: 13px 10px;
}
#dl-adr .att_02 {
    width: 100%;
    padding-top: 10px;
    font-size: 13px;
    line-height: 1.5;
}
#dl-adr .inquary_adj button {
    width: 280px;
    text-align: center;
    margin: 0 auto;
    height: 60px;
    border-radius: 30px;
    background: linear-gradient(300deg, #01c6ff 0%, #00a6dc 100%);
    opacity: 1;
    /*cursor: default;*/
    cursor: pointer;
    font-size: 2rem;
    color: white;
    box-shadow: 0 30px 60.2px 9.8px rgb(214 242 252 / 10%);
}
#dl-adr .inquary_adj button:hover {
    background: linear-gradient(300deg, rgba(1, 198, 255, 0.8) 0%, rgba(0, 166, 220, 0.8) 100%);
    box-shadow: 0 30px 60.2px 9.8px rgb(214 242 252 / 20%);
    opacity: 0.9; 
}

#dl-adr{
    margin: 0 auto;
    height: 300px;
}
#dl-adr .inquary_adj {
    width: 280px;
    text-align: center;
    margin: 50px auto 20px;
}
#dl-adr .table .ellipse2_inquiry span {
    background-color: #999;
    color: #fff;
    padding: 3px 6px 5px;
    border-radius: 2px;
    font-weight: normal;
    margin-right: 7px;
    font-size: 1.3rem;
    vertical-align: inherit;
}
.double-strikethrough {
    position: relative;
    display: inline-block;
}

.double-strikethrough::before,
.double-strikethrough::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px; 
    background-color: #d92435; 
}

.double-strikethrough::before {
    top: 40%; 
}

.double-strikethrough::after {
    top: 60%; 
}