@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');
html{

}

*{ 
font-feature-settings : "palt";
letter-spacing: 0.5px;
}


body {
font-size:clamp(0.9rem, 0.818rem + 0.41vw, 1.125rem);
color: #212531;
font-family: Arial, Helvetica,"BIZ UDPGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
background-color: #EFF5FC;
/*320-1200　16px-18px*/
line-height: 170%;
}

li { list-style: none; }

ul {
margin: 0;
padding: 0;
}

a, a:link, a:visited {
color: #0771bc;
}

a:hover {
transition: 0.5s;
}

p{
font-size:clamp(0.9rem, 0.818rem + 0.41vw, 1.125rem);
margin: 0;
padding: 0;
text-align: left;
}

dl,dt,dd{
    text-align: left;
clear: both;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}

header{
text-align: center;
background: #fff;
box-shadow: 0px 5px 5px -5px rgba(26,112,212,0.2);
position: relative;
}


header h1{
margin: 0 auto;
padding: 8px 0 10px 0;
width: 200px;
height: auto;
}

h2{
font-size: clamp(1.6rem, 1.091rem + 2.55vw, 3rem);
margin: 10px 0;
line-height: 130%;
}


h3{
color: #253f5a;
font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
margin:10px 0 20px 0;
  position: relative;
  display: inline-block;
  padding: 0 50px;
}

h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 25px;
  height: 1px;
  background-color: #9cbbdc;
}

h3:before {
  left:0;
}
h3:after {
  right: 0;
}

h4{
color: #253f5a;
font-size:clamp(1rem, 0.927rem + 0.36vw, 1.2rem);
margin:10px 0;
  position: relative;
  display: inline-block;
  padding: 0 30px;
}

h4:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: #9cbbdc;
}

h4:before {
  left:0;
}

i{ margin-right: 5px; }


.container{
width: clamp(300px, 98%, 1200px);
padding: clamp(0.938rem, 0.71rem + 1.14vw, 1.563rem) 0;
margin: 0 auto;
text-align: center;
}

.fc_w {color: #fff!important; }
.fc_w:hover,.fc_w:visited,.fc_w:link { color: #fff; }
.fc_gr {color: #00A927; }
.fc_b{color: #1a6fd4;}
.fc_o{color: #ff961b;}
.fc_re{color: #ff4f68;}
.flo_right { float: right;}
.flo_left { float: left; }
.bgc_w{
    background: #fff
}
.display_ib{display: inline-block}
.img_w80{
   width: clamp(200px, 280px, 80%);
    margin: 10px;
}

.ind {
text-indent: -1em;
margin-left: 1em;
}

.mb0  {margin-bottom: 0!important}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mr10 {margin-right: 10px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mt30a{margin: 30px auto 0 auto!important}

.txt_c{text-align: center!important;}
.txt_l{ text-align: left!important;}
.txt_r{text-align: right!important;}

.fs_s {font-size: 80%!important;}
.fs_l {font-size: 120%!important;}
.fw_b {font-weight: bold;}

.fle {
	display: flex;
    align-items: flex-start;
    align-items: center;
}
.notice{
font-size: 1.4rem;
}
.linear{
background: linear-gradient(transparent 70%, #D4FF44 0%);
margin: 0 2px;
}


/**/
.main_bg_dot{
  background-image:linear-gradient(#ffffff, #eff5fc);
}

.main_bg{
  background-image: url("../image/main_img.png");
background-repeat: no-repeat;
    background-position: 70% top;
    background-size:40%;
}


#main_info ul{
    display: flex;
}

#main_info h2{
text-align:left;
font-weight:normal;
/*text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);*/
}

#main_info .read{
width: clamp(320px, 100%, 1260px);
margin: 20px 20px 30px 0px;
}

#main_info .main-ctas {
    display: flex;
    margin-bottom: 20px;
}

#main_info .main-ctas a{
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    height: 50px;
    margin: 3px 6px;
}

.main-ctas .cta-solid{
    background: #196fd2;
    color:#fff;
    box-shadow:0 4px 12px rgba(26,111,212,0.28);
}
.main-ctas .cta-solid:hover{background:#1560bd;}


.main-ctas .cta-outline{
    background: #fff;
    color: #196fd2;
    border: #196fd2 1px solid;
}
.main-ctas .cta-outline:hover{background:#f5f8fb;}

.main_point{
        display: flex;
}
.main_point div{
     font-size: clamp(0.6rem, 0.527rem + 0.36vw, 0.8rem);
    line-height: 120%;
    border-radius: 10px;
    background: #fff;
    border: #cfe1f6 solid 1px;
    padding: 15px clamp(0.5rem, 0.364rem + 0.68vw, 0.875rem) 5px clamp(0.5rem, 0.364rem + 0.68vw, 0.875rem);
    margin: 0 clamp(0.125rem, 0.057rem + 0.34vw, 0.313rem);
    text-align: left;
    color: #70737D;
    display: flex;
    justify-content:center;
}
.main_point div i{
    color:#196fd2;
    text-align: center;
	margin: -10px 10px 0px 0px;
	padding:4px 0 0 0;
    line-height: 100%;
    width: 40px;
    height: 40px;
    background: #ebf2fb;
    font-size: 2rem;
    border-radius: 10px;
}


.main_point div:nth-of-type(2){
    padding-top: 10px;
}
.main_point div:nth-of-type(2) i{
	margin-top: -5px;
}

.btn_square{
  position: relative;
  display: inline-block;
  padding: 0.25em 0.8em;
  margin: 10px;
  text-decoration: none;
  color: #FFF!important;
  background: #14a2f1;
  border: solid 1px #18A3E3;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.btn_square:active {
  border: solid 1px #03A9F4;
  box-shadow: none;
  text-shadow: none;
}


.problem_box ul{
    display: flex;
    justify-content:space-around
}
.problem_box ul li{
    box-shadow: 0px 0px 6px rgba(26,112,212,0.1);
    padding:12px 24px;
    margin: clamp(0.313rem, -0.028rem + 1.7vw, 1.25rem) clamp(0.313rem, 0.199rem + 0.57vw, 0.625rem);
    border-radius: 10px;
    line-height: 120%;
    font-size: clamp(0.8rem, 0.727rem + 0.36vw, 1rem);
    text-align: left;
    width: 25%;
    display: flex;
    justify-content:flex-start;
    color:#fff;
}


.problem_box ul li i{
color:#fff;
text-align: center;
margin: 0px 10px 0px 0px;
padding:4px 0 0 0;
line-height: 100%;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 2rem;
background: rgba(255,255,255,0.2);
    
}


.reason_box,.type_box,.other_box{
background: #fff;
padding: 40px 20px 20px 20px;
}

.other_box ul {
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}

.other_box ul li{
width: 50%;
text-align: left;
}


.other_box div {
border: 1px #e2ebf4 solid;
border-radius: 8px;
margin: 0px 20px 10px 0px;
padding: 10px;
line-height: 140%;
}

.other_box div .faq_q{
margin-bottom: 10px;
font-size: 1rem;
font-weight: bold;
}
.other_box div .faq_a{
margin-top: 10px;
padding: 10px;
border-top:1px dashed #e2ebf4;
font-size: 0.9rem;
    color: #373737
}

.faq_q:first-letter{
font-weight: bold;
margin-right: 10px;
}

.faq_q:first-letter{
color: #65a4d6;
}

.reason_box ul{
display: flex;
justify-content:space-around
}

.reason_box ul li{
border: 1px solid #cfdff5;
border-radius: 10px;
padding: 20px;
width: 24%;
text-align: center;
margin-bottom: 10px;
}

.reason_box ul li div span{
display: block;
font-size: clamp(0.8rem, 0.727rem + 0.36vw, 1rem);
color: #2A2828;
text-align: left;
line-height: 150%;
}

.reason_box ul li .title{
font-weight: bold;
font-size: clamp(1rem, 0.927rem + 0.36vw, 1.2rem);
text-align: center;
margin-bottom: 10px;
}


.reason_box ul li i{
color:#fff;
text-align: center;
margin: 0px 0px 20px 0px;
padding:4px 0 0 0;
line-height: 100%;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 3rem;
}

.reason_box ul li .bggr_bl,.problem_box .bggr_bl{
background: linear-gradient(to bottom, #00d2ff, #3a7bd5);
}

.reason_box ul li .bggr_gr,.problem_box .bggr_gr{
background: linear-gradient(to bottom, #75E34B, #1D976C);
}

.reason_box ul li .bggr_or,.problem_box .bggr_or{
background: linear-gradient(to bottom, #eea849, #f46b45);
}

.reason_box ul li .bggr_re,.problem_box .bggr_re{
background: linear-gradient(to bottom, #FF91A8, #FF4F68 );
}

.type_box ul{
display: flex;
justify-content:space-around;
}

.type_box ul li{
border: 1px solid #cfdff5;
border-radius: 10px;
width: 32%;
text-align: center;
}

.type_box ul li .type_title{
color: #fff;
font-weight: bold;
padding: 10px;
margin: 0;
font-size: 1.2rem;
border-radius: 10px 10px 0 0;
}

.type_box ul li .inner{
padding: 20px;
    line-height: 140%;
}
.type_box ul li .inner p{
font-weight: bold;
margin: 2px 0 8px 0;
}

.type_box ul li .c_cloud{
background: #0b9fbe;
}
.type_box ul li .c_zion{
background: #2260b0;
}
.type_box ul li .c_free{
background: #33ad00;
}

.type_box ul li .inner img{
height: 46px;
width: auto;
margin-bottom: 12px;
}

.type_box ul li .inner .check{
display: block;
text-align: left;
line-height: 120%;
    font-size: 1rem;
margin-bottom: 5px;
}

.type_box ul li .inner .check i{
line-height: 100%;
font-size: 0.95rem;
    color: #1c70d4;
}

.type_box ul li .inner a{
    text-align: center;
    text-decoration: none;
    border-radius: 20px;
    height: 40px;
    font-size: 1rem;
    padding: 6px 10px;
    margin: 18px 6px 3px 6px!important;
    display: block;
    background: #fff;
}

.type_box ul li .inner .cloud_btn{
    color: #0b9fbe;
    border:#0b9fbe 1px solid;
}
.type_box ul li .inner .zion_btn{
    color: #2260b0;
    border:#2260b0 1px solid;
}
.type_box ul li .inner .free_btn{
    color: #33ad00;
    border:#33ad00 1px solid;
}

.type_box ul li .inner a:hover{
    box-shadow:0 4px 4px rgba(26,111,212,0.1);
    background: #f0f5fc;
}

.type_box .hikaku_btn a{
    width: clamp(17.5rem, 10.227rem + 36.36vw, 37.5rem);
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    height: 50px;
    margin: 22px 6px 3px 6px;
background: #196fd2;
    color:#fff!important;
    box-shadow:0 4px 12px rgba(26,111,212,0.28);
    text-align: center!important;
}

.type_box .hikaku_btn a:hover{
background:#1560bd;
}

.csv_import table {
margin: 10px auto 60px auto;
display: block;
overflow-x: scroll;
border-radius: 5px;
}
.csv_import th,.csv_import td{
    line-height: 120%;
    padding:clamp(0.313rem, 0.199rem + 0.57vw, 0.625rem) clamp(0.25rem, 0.205rem + 0.23vw, 0.375rem);
    font-size: clamp(0.8rem, 0.764rem + 0.18vw, 0.9rem);
}
.csv_import th{
background: #1b6fd3;
color: #fff;
text-align: left;
}

.csv_import td{
background: #fff;
border: 1px solid #cfe1f5;
}

.csv_import td:nth-of-type(2){
text-align:center;
white-space: nowrap;
}




.csv_import tr:nth-child(even) td{
    background: #f2f8ff;
}


.bg_point{
  width: calc(100% - 40px);
    margin: 0 20px ;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
justify-content: space-around;
    background: #f1f6fe;
    border-radius: 10px;
    border: 1px solid #dbe8f7;
    padding: 20px
}

.bg_point i{
color:#196fd2;
text-align: center;
margin: 0px;
padding:8px 0 0 0;
line-height: 100%;
border-radius: 50%;
width: 100px;
height: 100px;
background: #dfebfa;
font-size: 5rem;
}


.bg_point strong{
    color: #196fd2;

}



.bnr_img_w{
width: clamp(300px, 100%, 900px);
height: auto;
}


.gs01{
  border-top: 10px solid #3a96e9;
  border-image:linear-gradient(90deg, rgba(0,178,50,1) 0%, rgba(184,218,56,1) 100%);
  border-image-slice: 1;   
}
.gs02{
  border-top: 10px solid #3a96e9;
  border-image: linear-gradient(90deg, rgba(58,149,232,1) 0%, rgba(0,207,211,1) 100%);
  border-image-slice: 1;   
}
.gs03{
  border-top: 10px solid #ff4f68;
  border-image:linear-gradient(90deg, rgba(255,79,104,1) 0%, rgba(255,172,99,1) 100%);
  border-image-slice: 1;   
}
.gs04{
  border-top: 10px solid #f1b351;
  border-image: linear-gradient(90deg, rgba(249,181,83,1) 0%, rgba(255,215,87,1) 100%);
  border-image-slice: 1;   
}


/*footer*/

footer {
 width: 100%;
 text-align: center;
padding: 30px 0 20px 0;
border-top:2px solid #eee;
}

small {
font-size: 0.8rem;
}


/* TOPスクロール*/
#pageTop {
	position: fixed;
	bottom: 150px;
	right: 0;
	z-index: 999;
	font-size: 1.2rem;
    text-align: center;
    margin: 10px;
	padding:3px 0 0 0;
    line-height: 100%;
	border: solid #285fc6 1px;
	border-radius: 50%;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.85)
}
#pageTop i {
    color:#285fc6;
	margin: 0px auto;
}


.f_cta{
    padding: 20px 30px;
    background: #1a70d4!important
}
.f_cta ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.f_cta ul p{
font-size: 0.9rem;
line-height: 150%;
    text-align: left
}

.f_cta h4{
    	color: #fff;
}
.f_cta p{
    font-size: 1rem;
    text-align: center;
    color: #f3f8ff;
}

.f_cta ul .f_cta_box{
display: flex;
flex-wrap: wrap;
}

.f_cta ul .f_cta_box div{
background: #fff;
border-radius: 5px;
font-size: 0.8rem;
padding: 12px 20px;
margin: 10px;
color: #196fd2;
font-weight: bold;

}

.f_cta ul .f_cta_box div a{
text-decoration: none;
display: flex;
background: #196fd2;
color: #fff;
border-radius: 20px;
padding: 2px 30px;
white-space: nowrap;
}


.f_cta ul .f_cta_box div a i{
margin-top: 2px;
    font-weight: normal;
}

.f_cta ul .f_cta_box div a:hover{background:#1560bd;}

/* pc */
@media print, screen and (min-width: 960px) {

body {

}
    
.pc_no{
        display: none;
    }

.container{

}
    
#main_info ul{
height: 420px;
}

    
}

/* mobile*/
@media only screen and (max-width: 959px) {

.mob_no{
        display: none;
    }
.mob_img{
        width: 100%;
    height: auto;
    }
    
.fle,.other_box ul,.problem_box ul,.type_box ul,.reason_box ul{
flex-wrap: wrap;
}
    
.other_box ul li {
width: 95%!important;
margin: 10px auto;
}

    
.problem_box ul li,.reason_box ul li{
 width: 45%;
}

.type_box ul li{
width: 98%;
margin-bottom: 10px;
}

.f_cta ul .f_cta_box div{
width: 80%;
margin: 5px auto;
}

body {
    font-size: 1rem;
}

a{
overflow-wrap: anywhere;
    }
.container {
	width: 98%
	}
    

dd{
        margin:5px 10px;
    }
    
dt{
padding: 10px 20px 10px 30px;
margin-bottom: 10px;
font-size:1.0rem;
line-height: 130%;
}
    
	
    }