@charset "utf-8";
/* CSS Document */
html {
    background: #fff;
}
body {
    position: relative;
    color: #4b4b4b;
    font-weight: 400;
    font-size: 18px;
    font-family: "Noto Sans Japanese", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.6;
    font-feature-settings: "palt";
}
#wrap{
  overflow-x: hidden;
}
/*共通項目*/
section {
  margin-top: -80px;
  padding-top: 80px;
  padding-bottom: 100px;
}
section h2{
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
section .h2-sub{
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  padding: 0 0 24px;
}
/*BTN*/
.btn-default{
  padding: 0 0 16px;
}
.btn-default a{
  margin: 0 auto;
  display: block;
  background: #0f478d;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  width: 80%;
  max-width: 240px;
  border-radius: 50px;
  padding: 8px 0;
  border: 2px solid #0f478d;
  transition: all .3s;
}
.btn-default a:hover{
  background: #fff;
  color: #0f478d;
  text-decoration: none;
}
.btn-red a{
  text-align: center;
  margin: 0 auto;
  display: block;
  background: #cb0524;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  width: 80%;
  max-width: 240px;
  border-radius: 50px;
  padding: 8px 0;
  border: 2px solid #cb0524;
  transition: all .3s;
}
.btn-red a:hover{
  background: #fff;
  color: #cb0524;
  text-decoration: none;
}
.btn-plice a{
  text-align: center;
  margin: 0 auto;
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  width: 80%;
  max-width: 240px;
  border-radius: 50px;
  padding: 8px 0;
  transition: all .3s;
}
.btn-plice a:hover{
  text-decoration: none;
}
/*ヘッダー*/
header{
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background: #fff;
  z-index: 5000;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
header .inner{
  display: flex;
  justify-content: space-between;
}
header .inner .logo{
  display: flex;
  align-items: center;
}
/*ヘッダー　ロゴ*/
header .inner .logo .logoimg{
  margin: 18px 
}
header .inner .logo .logokeyword{
  font-size: 14px;
  margin: 2px 0 0 0;
  color: #0F478D;
}
/*ヘッダー　ナビ*/
header .inner nav{
  display: flex;
}
header .inner nav ul{
  display: flex;
  margin: 24px 12px 0 0;
}
header .inner nav ul li{
  margin: 0 6px; 
}
header .inner nav ul li a{
  color: #666;
  font-size: 15px;
  font-weight: 500;
}
header .inner nav .contact_btn{
  background: #f00;
  height: 80px;
}
header .inner nav .contact_btn a{
  display: block;
  padding: 24px;
}


@media screen and (max-width:1050.98px){
header .inner nav ul li{
  display: none ;
}
header .inner .logo .logoimg{
  margin: 18px 18px 18px 70px; 
}
}
@media screen and (max-width:767.98px){
  header .inner nav .contact_btn{
    display: none;
  }
}
@media screen and (max-width:575.98px){
  header .inner nav .contact_btn{
    display: none;
  }
  header .inner .logo{
    display: block
  }
  header .inner .logo .logoimg{
    margin: 16px 18px 8px 70px;
  }
  header .inner .logo .logokeyword {
    margin: 0px 18px 18px 70px;
    font-size: 8px;
  }
  header .inner .logo .logokeyword .br{
    display: none;
  }
  header .inner .logo .logoimg img{
    width: 120px;
  }
}

footer{
  background: #464344;
  padding: 64px 0;
}
footer a{
  display: block;
  color: #ccc;
  font-size: 18px;
  font-weight: 500;
}
footer a:hover{
  color: #fff;
  text-decoration: none;
}
footer .footer-contact{
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  color: #464344;
  margin: 0 0 8px;
  transition: all .3s;
}
footer .footer-contact:hover{
  background: #CB0624;
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  margin: 0 0 8px;
}
footer .sns{
  margin: 6px 0 0;
  display: flex;
}
footer .sns a{
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 6px 6px 0;
}
footer .sns p{
  width: 40px;
  height: 40px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
footer .twitter{
  background: #fff;
  color: #666;
  transition: all .3s;
}
footer .facebook{
  background: #fff;
  color: #666;
  transition: all .3s;
}
footer .twitter:hover{
  background: #00acee;
  color: #fff;
}
footer .facebook:hover{
  background: #3b5998;
  color: #fff;
}
strong{
  background:linear-gradient(transparent 60%, #E9F7B0 60%);
  font-weight: 500;
}
strong.red{
  color: #f00;
  font-size: 140%;
}

/*キャッチコピー*/
#top{
  margin: 80px 0;
}
#sub-top{
  margin: 160px 0;
}
/*特徴*/
#unique .container{
  padding: 64px 0;
  border-radius: 10px;
}
#unique h2{
  color: #1d1d1f;
  font-size: 64px;
  font-weight: 900;
  margin: 0 0 48px;
}
#unique .h2-sub{
  width: 280px;
  height: 2px;
  text-align: center;
  margin: 0 auto 48px;
  background: #d6d6d6;
  padding: 0;
}
#unique .row{
  padding: 0 24px;
}
#unique .row > div{
  margin: 0 0 15px;
  text-align: center;
}
#unique .row img{
  margin: 42px 0 0;
}
#unique .o-card{
  border-radius: 10px;
  text-align: left;
}
#unique .o-card h3{
  padding: 48px 0 8px;
  font-size: 36px;
  font-weight: 700;
  color: #1d1d1f;
}
#unique .o-card .h3bar{
  width: 60px;
  height: 2px;
  background: #03a2ff;
  margin: 0 0 12px;
}
#unique .o-card p{
  font-size: 18px;
  font-weight: 300;
  padding: 0 0 16px;
  text-align: left;
}
/*目的*/
#unique-img{
  background: #eee;
}
#unique-img h2{
  color: #fff;
  text-shadow:3px 3px 0 #086bc7, -3px -3px 0 #086bc7,
              -3px 3px 0 #086bc7, 3px -3px 0 #086bc7,
              0px 3px 0 #086bc7,  0 -3px 0 #086bc7,
              -3px 0 0 #086bc7, 3px 0 0 #086bc7;
  font-size: 42px;
}
#unique-img .h2-sub{
  font-weight: 600;
}
#unique-img .goal{
  background: #086bc7;
  width: 260px;
  text-align: center;
  color: #fff;
  font-weight: 400;
  padding: 12px 0; 
  position: relative;
  margin: 16px auto 6px;
}
#unique-img p{
  margin: 0 auto 4px;
}
#unique-img .list-inner{
  margin: 0 0 6px;
  padding: 0 15px 15px;
}
#unique-img .list-inner p{
  text-align: center;
  font-weight: 600;
  margin: 8px auto 16px;
}
#unique-img .list-inner .row .inner{
  background: #4d94d7;
  margin: 6px 0;
  padding: 8px 16px;
  color: #fff;
  font-weight: 600;
}
#unique-img .success{
  border: #086bc7 2px solid;
  width: 90%;
  text-align: center;
  margin: 0 auto 0;
  color: #086bc7;
  font-weight: 600;
  padding: 32px 0; 
  position: relative;
  font-size: 32px;
}
#unique-img .success2{
  border: #086bc7 2px solid;
  background: #086bc7;
  width: 90%;
  text-align: center;
  margin: 0 auto 0;
  color: #fff;
  font-weight: 600;
  padding: 32px 0; 
  position: relative;
  font-size: 32px;
}
#unique-img .goal2{
  width: 100%;
  text-align: center;
  color: #555;
  font-weight: 600;
  padding: 12px 0; 
  position: relative;
  margin: 0 auto 6px;
}

#dn-menu{
    padding-top: 160px;
}
#dn-menu .container{
  padding: 64px 0;
  border-radius: 10px;
}
#dn-menu .block{
  background: linear-gradient(135deg, #ff4040, #ffd323);
  color: #fff;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 48px;
  text-align: center;
  font-weight: 600;
}
#dn-menu h2{
  color: #1d1d1f;
  font-size: 64px;
  font-weight: 900;
  margin: 24px 0 48px;
}
#dn-menu .h2-sub{
  width: 280px;
  height: 2px;
  text-align: center;
  margin: 0 auto 48px;
  background: #d6d6d6;
  padding: 0;
}
#dn-menu .container .dn-discription{
  text-align: center;
  font-size: 24px;
  color: #1d1d1f;
  margin: 0 0 32px;
}
#dn-menu .container .dn-discription b{
  font-size: 32px;
  color: #ff523d;
}
#dn-menu .row{
  padding: 0 24px;
}
#dn-menu .row > div{
  margin: 0 0 15px;
  text-align: center;
}
#dn-menu .image{
  text-align: center;
}
#dn-menu .row img{
  margin: 42px 0 0;
}
#dn-menu .o-card{
  border-radius: 10px;
  text-align: left;
}
#dn-menu .o-card h3{
  padding: 48px 0 8px;
  font-size: 36px;
  font-weight: 600;
  color: #1d1d1f;
}
#dn-menu .o-card .h3bar{
  width: 60px;
  height: 2px;
  background: #03a2ff;
  margin: 0 0 12px;
}
#dn-menu .o-card p{
  font-size: 18px;
  font-weight: 300;
  padding: 0 0 16px;
  text-align: left;
}

#report{
  background: #e2ba91;
}
#report h2{
  color: #fff;
}
#report .h2-sub{
  padding: 0 0 32px;
  color: #fff;
  font-weight: 500;
}
#report .row > div{
  margin: 0 0 15px;
}
#report .o-card{
  background: #fff;
  border-radius: 10px;
  text-align: center;
  color: #1d1d1f; 
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
#report .o-card span{
  display: block;
  padding: 32px 0;
  font-size: 32px;
  font-weight: 300;
}
#report .o-card h3{
  font-size: 24px;
  font-weight: 400;
  padding: 0 0 32px;
}
#report .o-card p{
  font-size: 18px;
  font-weight: 300;
  padding: 36px 15px 16px;
  text-align: left;
  border-top: 1px solid #eaeaea;
  color: #4c4c4c;
}



#price{
  background: #eee;
}
#price .campaign{
  background: linear-gradient(135deg, #ff4040, #ffd323);
  border-radius: 10px;
  color: #fff;
  padding: 32px;
  text-align: center;
  margin: 0 0 32px;
}
#price .campaign h3{
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-size: 42px;
  text-shadow: 3px 3px 0 #ff4d4d, -3px -3px 0 #ff4d4d, -3px 3px 0 #ff4d4d, 3px -3px 0 #ff4d4d, 0px 3px 0 #ff4d4d, 0 -3px 0 #ff4d4d, -3px 0 0 #ff4d4d, 3px 0 0 #ff4d4d;
}
#price .campaign .c1{
  margin: 0;
  padding: 0;
  font-weight: 900;
  font-size: 42px;
}
#price .campaign .c2{
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 32px;
}
#price .price{
  background: #fff;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  margin: 0 0 15px;
  padding: 15px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.1);
}
#price .plan1{
  border-top: 12px solid #006cd1;
}
#price .plan2{
  border-top: 12px solid #e60449;
}
#price .plan3{
  border-top: 12px solid #e6ae04;
}
#price .price h3{
  margin: 24px 0;
  font-weight: 600;
  font-size: 24px;
}
#price .price img{
  margin: 12px 0;
}
#price .plan1 ul span{
  color: #006cd1;
}
#price .plan2 ul span{
  color: #e60449;
}
#price .plan3 ul span{
  color: #e6ae04;
}
#price .price ul span b{
  font-size: 24px;
}
#price .plan1 .btn-plice a{
  background: #006cd1;
  border: 2px solid #006cd1;
}
#price .plan1 .btn-plice a:hover{
  background: #fff;
  color: #006cd1;
}
#price .plan2 .btn-plice a{
  background: #e60449;
  border: 2px solid #e60449;
}
#price .plan2 .btn-plice a:hover{
  background: #fff;
  color: #e60449;
}
#price .plan3 .btn-plice a{
  background: #e6ae04;
  border: 2px solid #e6ae04;
}
#price .plan3 .btn-plice a:hover{
  background: #fff;
  color: #e6ae04;
}
#price .tyu{
  font-weight: 600;
  font-size: 14px;
}
#price .tyu span{
  color: #ff0054;
}

#price .table{
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.1);
}
#price .table h3{
  text-align: center;
  padding: 32px 0 16px;
  font-weight: 600;
}
#price .table p{
  padding: 15px;
}



/*USE INFO*/
#useinfo{
  background: linear-gradient(135deg, #48c6ef, #6f86d6);
  padding-bottom: 160px;
}
#useinfo h2{
  color: #fff;
}
#useinfo .h2-sub{
  padding: 0 0 32px;
  color: #fff;
  font-weight: 600;
}
#useinfo .row > div{
  margin: 0 0 15px;
}
#useinfo .o-card{
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
#useinfo .o-card .icon{
  padding: 48px 0 16px;
  display: block;
}
#useinfo .o-card h3{
  font-size: 18px;
  font-weight: 600;
  color: #0f478d;
  padding: 32px 0;
}
#useinfo .o-card p{
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px 16px;
  text-align: left;
}

#use .tab-content{
  padding: 0 16px;
}
#use h3{
  margin: 32px 0;
}








.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab {
	margin: 1em auto;
}
.cp_tab > input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	        appearance: none;
	display: none;
}
.cp_tab .cp_tabpanel {
	display: none;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6) {
	display: block;
}
.cp_tab > label {
	position: relative;
	display: inline-block;
	padding: 16px;
	cursor: pointer;
	border: 1px solid transparent;
	border-bottom: 0;
  color: #333;
  font-weight: 600;
	border-radius: 6px 6px 0 0;
}
.cp_tab > label:hover,
.cp_tab > input:focus + label {
	color: #0066cc;
}
.cp_tab > input:checked + label {
	margin-bottom: -1px;
	border-color: #cccccc;
	border-radius: 6px 6px 0 0;
  border-top: #0f478d 6px solid;
	border-bottom: 0px;
  background: #fff;
	color: #0066cc;
}
.cp_tab .cp_tabpanel {
	padding: 0.5em 1em;
	border-top: 1px solid #cccccc;
  margin: -9px 0 0;
}
@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
		font-size: 0.8em;
	}
	.cp_tab label {
		padding: 0.5em;
	}
}


.article h3{
  border-left: 6px solid #04B776;
  background: #f7f7f7;
  padding: 14px 12px;
  border-bottom: solid 3px #dadada;
}
.article h4{
  position: relative;
  padding: 10px 0 10px 16px;
  margin-left: 16px;
}
.article p{
  padding: 10px 0 10px 56px;
  margin-left: -16px;
}

.timeline {
  margin: 0 0 0 18px;
  position: relative;
}
.timeline span{
  font-size: 14px;
  font-weight: 600;
  color: #888;
}
.timeline p{
  font-size: 16px;
  padding: 10px 0 10px 16px;
}
.timeline p b{
  font-size: 20px;
}
.timeline:before {
  background-color: black;
  content: "";
  margin-left: -1px;
  position: absolute;
  top: 0;
  left: 16px;
  width: 2px;
  height: 100%;
}

.timeline-event {
  position: relative;
}

.timeline-event-copy {
  padding: 20px 40px 0 0;
  position: relative;
  top: -18px;
  left: 40px;
}

.timeline-event-icon {
  -moz-transition: -moz-transform 0.2s ease-in;
  -o-transition: -o-transform 0.2s ease-in;
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: black;
  outline: 10px solid white;
  display: block;
  margin: 10px 10px 10px -10px;
  position: absolute;
  top: 0;
  left: 20px;
  width: 10px;
  height: 10px;
}


#contact{
  padding-top: 160px;
  background: #eee;
}
#contact h2{
}
#contact .h2-sub{
  padding: 0 0 32px;
  font-weight: 300;
}
#contact .container{
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.1);
  padding: 64px 24px;
}
#contact form label{
    display: inline-block;
    font-size: 18px;
    margin: 0 0 6px 6px;
    padding: 0;
}
#contact form label .f_r{
    font-size: 12px;
    padding: 3px 8px;
    margin: 0 0 0 6px;
    background: #E9451C;
    color: #fff;
    border-radius: 8px;
}
#contact #BtConfirm,
#contact #BtSent,
#contact #BtCancel,
#contact #BtReset{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}
#contact #BtConfirm{
    margin: 12px 0 0;
    display: inline-block;
    font-size: 18px !important;
    width: 200px;
    background: #E9451C;
    padding: 8px 0;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: .3s all;
}
#contact #BtReset{
    margin: 12px 0 0;
    display: inline-block;
    font-size: 18px !important;
    width: 200px;
    background: #333;
    padding: 8px 0;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: .3s all;
}
#contact #BtSent{
    margin: 12px 0 0;
    display: inline-block;
    font-size: 18px !important;
    width: 200px;
    background: #E9451C;
    padding: 8px 0;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: .3s all;
}
#contact #BtCancel{
    margin: 12px 0 0;
    display: inline-block;
    font-size: 18px !important;
    width: 200px;
    background: #333;
    padding: 8px 0;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: .3s all;
}
#contact #BtConfirm:hover,
#contact #BtReset:hover,
#contact #BtSent:hover,
#contact #BtCancel:hover{
    opacity: .7;
}
#ContactConfirm{
	display:none;
    margin: 24px 0 0;
}
#contact .CfmItem{
    display:inline-block;
}
#contact .inputconf{
    display:inline-block;
}
select,input{
    height: auto !important;
}
select,input,textarea{
    font-size: 16px !important;
}

#contact_follow{
    padding: 48px 0;
}


#contact_done{
    padding: 80px 0;
    background: url("../img/sq_bg.jpg");
}
#contact_done h2{
    padding: 48px 0;
    font-size: 32px;
}
#contact_done p b{
    font-size: 24px;
}
#contact_done .top_return{
    margin: 12px 0 0;
    display: inline-block;
    font-size: 18px !important;
    width: 200px;
    background: #E9451C;
    padding: 8px 0;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: .3s all;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  background: #3f86ef;
  opacity: 0.6;
  border-radius: 50%;
  bottom: 16px;
  right: 86px;
  z-index: 1000;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -14px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


#message a{
  display: block;
  padding: 15px 20px;
  position: fixed;
  background: #f00;
  bottom: 96px;
  right: -300px;
  border-radius: 6px;
  text-align: center;
  z-index: 7000;
  transition: .3s all;
}
#message a:hover{
  background: #ff6a00;
}
#message .close-notice{
  border: 0;
  display: block;
  position: fixed;
  background: #fff;
  bottom: 146px;
  right: -300px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  z-index: 7001;
  cursor: pointer;
  transition: .3s all;
}
#message .close-notice:hover{
  background: #fffa;
}

@media screen and (max-width:767.98px){
  #message{
    display :none;
  }
  #footer-sp a{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 12px 0;
    display: block;
    text-align: center;
    background: #f00;
  }
  #page_top{
    bottom: 70px;
  }
  section h2,
  .block
  {
    font-size: 32px !important;
  }
  section h3{
    font-size: 26px !important;
  }
  #unique-img .success,
  #unique-img .success2{
    font-size: 15px !important;
  }
  #dn-menu p{
    padding: 0 15px;
  }
  #dn-menu .container .dn-discription{
    font-size: 18px;
  }
  #dn-menu .container .dn-discription b{
    font-size: 24px;
  }
}

@media screen and (min-width:768px){
  #footer-sp{
    display: none;
  }
}