@charset "UTF-8";
/**LOGOSWARE CSS*****************
lp.css
********************************/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/*mobile*/
/* @media (min-width: 576px) { 
    html {font-size:92%;} 
} */

/*PC*/
/* @media (min-width: 768px) { 
    html {font-size:100%;} 
} */

.header,.nav_bar,#header,
.headerImg,.mod-subHeader,#pankuzu,#footer{
    display: none;
}

/*font設定------------------------------------------------------------*/
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/NotoSansCJKjp-Regular.woff') format('woff'),
        url('../fonts/NotoSansCJKjp-Regular.eot')  format('eot');
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansCJKjp';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/NotoSansCJKjp-Bold.woff') format('woff'),
        url('../fonts/NotoSansCJKjp-Bold.eot')  format('eot');
    font-display: swap;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Regular.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Regular.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Regular.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

@font-face {
  font-family: "YakuHanJPs";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Bold.eot");
  src: url("../fonts/YakuHanJPs/YakuHanJPs-Bold.woff2") format("woff2"), url("../fonts/YakuHanJPs/YakuHanJPs-Bold.woff") format("woff");
  unicode-range: U+3008-3011, U+3014-3015, U+ff08-ff09, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}
/*body指定／フォント*/
body {
	font-family: YakuHanJPs,'NotoSansCJKjp',"Noto Sans CJK JP", -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
    color:#333;
}


/***************************************************************
効果
***************************************************************/
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*========= ページネーションCSS ===============*/
/*現在地表示のテキストの設定*/
.pagination a .hover-text {
  position:absolute;
  right:15px;
  top:0;
  opacity:0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  padding-right: 15px;
}

.pagination a:hover .hover-text {
  opacity: 1;
}

.pagination a:after {
  -webkit-transition:box-shadow 0.5s ease;
  transition:box-shadow 0.5s ease;
  width:10px;
  height:10px;
  display: block;
  border:1px solid;
  border-radius:50%;
  content:"";
  position: absolute;
  margin:auto;
  top:0;
  right:3px;
  bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
  .pagination a .hover-text{
    display: none;
  } 
}


/***************************************************************
パーツ
***************************************************************/
p{font-size: 1rem;line-height: 1.8;}
em.red-d{color:#d83300;font-style: normal;}

.p-color{
    color:#FFCA3A;
}

section{padding:4%;}

/*背景色*/
#kaiketsu{
    background-color: #F9F1E4;
}
#check{
    background-color: #DFEEE8;
}

#price{
    background-color: #F9F1E4;
}

#lp_footer{
    padding:2% ;
    background-color: #1A5988
}

/*セクションヘッダ********************/

.section-header{
    margin-bottom: 80px;
}

.section-header .eng{
    display: block;
    margin-bottom: 0.25em;
    font-size: 73px;
    color: #FFCA3A;
    opacity: 0.8;
    font-family: "Roboto Condensed";
    font-weight: 400;
}

.section-header h2{
    font-weight: bold;
    color: #555;
    font-size: 3rem;
    /* font-size: 48px; */
}

.section-header .lead-text>p{
    font-size: 21px;
    font-size: 1rem/*16px*/;
    font-size: 1.4rem;
    line-height: 1.8;
}

/*セクション本文の見出し********************/

.komidashi h3{
    font-size: 36px;
    font-weight: bold;
}

.short-border{
     position: relative;
    display: inline-block;
}

.short-border:before{
      content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 8px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color:#FFCA3A;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

/*CNVボタン********************/

.btn-cnv{
    padding: 0.5em 3em;
    font-size: 28px;
    background-color: #FFCA3A;
    border-radius: 145px;
        transition: all .3s;
}

.btn-cnv:hover{
      box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
  border-color: transparent;
}

/***************************************************************
セクションごと
***************************************************************/

header {padding: 1em 0;}
#navigation #title{font-size:1.1rem; font-weight: bold;}

header  nav a{color:#333;text-decoration: none;}

#voice .section-header .eng,
#contact .section-header .eng{
   color: #47A7DD
}

#price .section-header .eng{
    color: #555555;
    opacity: 0.45;
}

/*------------------------------------------------------------
ファーストビュー
------------------------------------------------------------*/

#first-view{
    background:url(https://platon.logosware.com/wp-content/uploads/header-bg.png) no-repeat center center;
    background-size: cover;
}

#copy{
    display: inline-block;
    font-size: 1.5rem;
    border-bottom: 4px dashed #FFFFFF;
}
#copy>strong{font-size:2.5rem;}
#pricedown{font-size: 1.5rem;font-weight: normal;}

#sub-service-title{font-size:2.3rem ;}
#service-title{
    font-size:4rem ;
    font-weight: bold;
}

/*------------------------------------------------------------
悩み
------------------------------------------------------------*/
#call h3{
    font-size: 2.6rem;
        font-weight: bold;
    line-height: 1.5;
}

#nayami-checklist{
    font-size: 1.6rem;
    line-height: 1.7;
}


/*下吹き出し********************/

.balloon {
 	position: relative;
	/* display: inline-block; */
    margin: 0 auto;
	background-color: #fff;
	border-bottom: solid 2px #525252;
	padding: 16px;
	min-width: 240px;
 	max-width: 900px;
	text-align: center;
}
.balloon:before,
.balloon:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.balloon:before {
	border: solid 16px transparent;
	border-top: solid 1.5rem #525252;
}
.balloon:after {
	border: solid 18px transparent;
	border-top: solid 26px #fff;
	margin-top: -5px;
}
.balloon p {
	margin: 0;
	padding: 0;
}

/*解決*/
#kaiketsu{padding-top:0}
#kaiketsu h2{
    margin-top: -30px;
    font-size: 2.7rem;
    line-height: 1.5;
    font-weight: bold;
}

.triangle{
    margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 25px 0 25px;
border-color: #ffffff transparent transparent transparent;
}

#akamaru{
    margin:-100px  20% 0 auto;
}

/*------------------------------------------------------------
Point
------------------------------------------------------------*/
#service3 h4{
    font-weight: bold;
    font-size: 1.3rem;
}

#service3 .service-text{
    width: 80%;
    margin-bottom: 2rem;
}
.service-text{
    font-size: 1rem;
    text-align:left;
    line-height: 1.8;
}
/*------------------------------------------------------------
check!
------------------------------------------------------------*/
#check{padding-top: 0;}

.check-balloon{
    margin-top: -50px;
}

#check h2{
    font-size: 2.3rem;
    font-weight: bold;
    color:#555;
    line-height: 1.5;
}

#check p{
    font-size: 1.3rem;
    line-height: 1.8;
}

.dash{
    border-bottom: 3px dashed #555;
}

/*------------------------------------------------------------
voice
------------------------------------------------------------*/
.user-voice-header>h3{
    display: inline-block;
    padding-bottom: 0.9rem;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: bold;
    border-bottom: 1px solid #555;
}
.user_info{font-size: 1.2rem;}

#voice h4{
    font-size: 1.6rem;
    line-height: 1.5;
}

#voice em{
    font-style: normal;
    color:#47A7DD;
}

/*------------------------------------------------------------
price
------------------------------------------------------------*/
#price table{
    background-color: #fff;
}

#price h4{
    line-height: 1.6;
}

#price table.table{border: 1px solid #555;}

#price table.table th,
#price table.table td{
padding: 1.5rem;
font-size: 1.3rem;
border-bottom: 1px solid #555;
}

/*------------------------------------------------------------
FAQ
------------------------------------------------------------*/
#faq .q{
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    background-color: #F9F1E4;
}

#faq .a{
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
}

/*------------------------------------------------------------
close
------------------------------------------------------------*/

#close{
    background: url(https://platon.logosware.com/wp-content/uploads/flag.png) no-repeat 75% 105% #5399CE;
}

#close h2{
    font-size: 2.1rem;
    line-height: 1.6;
}

#close p{
    font-size: 1.2rem;
}

/*------------------------------------------------------------
lp_footer
------------------------------------------------------------*/
#lp_footer a{color:#fff;text-decoration: none;}