@charset "UTF-8";

/* 色関係
----------------------------------------------------*/
a {color:var(--linkColor);}
.mark_01 {background:linear-gradient(transparent 60%,var(--markColor) 60%);}

.boldtext {font-weight:bold;}


/* 汎用
----------------------------------------------------*/
.afimg {display:inline;}
.kage {box-shadow: 4px 4px 4px #111!important;}
.at_mini_red {font-size:1.2rem!important;;color:#993333!important;;}

/* レイアウト
----------------------------------------------------*/
body {
  background: url(../img/back_1.png) right top;
  background-size: cover;
  color: #333333;
}
#headerSec {
  border-bottom: 1px solid #eeeeee;
  margin: 0 0 4rem 0;
  padding: 12rem 2rem 14rem;
  background-image: url(../img/back_4.jpg);
  background-position: center bottom;
  background-size: cover;
  text-align: center;
  position: relative;
}
header#headerSec:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
}
#headerSec div {
  min-width: 740px;
  display: inline-block;
  border: 10px solid var(--primaryColor);
  background-color: rgba(255,255,255,0.9);
  padding: 0rem 8rem 6rem;
  text-align: center;
  position: relative;
  box-shadow: 4px 4px 4px #111;
}
#headerSec p.badge {
  background: var(--catchColor);
  border-radius: 12px;
  padding: 1rem 2rem;
  position: relative;
  left: 0rem;
  top: -4rem;
  color: #ffffff;
  font-weight: bold;
  font-size: 3rem;
}
#headerSec p.tagline {
  margin-bottom: 2rem;
  padding: 0.4rem 2rem 0.3rem;
  background-color: var(--primaryColor);
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
}
#headerSec p.firstDescription {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  font-weight: bold;
}
#headerSec p.firstDescription img {
  width: 100px;
  display: inline-block;
  vertical-align: middle;
}

#headerSec h1 {
  margin-bottom: 2rem;
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: #35589b;
}
#headerSec h1 img {
  width: 60%;
  margin: 0 auto;
}
#headerSec ul {
  display: flex;
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
}
#headerSec ul li {
  flex: 1;
  border: 2px solid var(--catchColor);
  border-radius: 8px;
  padding: 1.7rem 0.6rem 1.5rem;
  background-color: rgb(255, 255, 255);
  font-size: 1.6rem;
  font-weight: bold;
  color: #333333;
}
#headerSec ul li img {
  width: 120px;
  margin: 0 auto 0.8rem;
}
#headerSec ul li:nth-of-type(2){
  margin: 0 1rem;
}

.attention {
  border: 1px solid #eeeeee;
  background-color: #f5f5f5;
  max-width: 960px;
  margin: 0 auto 4rem;
  padding: 2rem 2rem;
  font-size: 1.4rem;
}
.changePrice {
  margin-top: -1.5rem;
  text-align: right;
  font-size: 1.2rem;
}

.cta {
  text-align: center;
}
header .cta {
  margin-bottom: 10px;
}
.cta a {
  display: inline-block;
  width: 90%;
  max-width: 520px;
  padding: 20px 20px;
  background-color: rgba(230,65,65,1.0);
  color: #ffffff;
  border-radius: 8px;
  font-size: 1.8rem;
  text-decoration: none;
}
.cta a:hover {
  background-color: rgb(18, 177, 0);
}
.cta a span {
  text-decoration: none;
}
.cta span {
  display: block;
  font-size: 1.2rem;
}

main > section {
  max-width: 980px;
  margin: 0 auto;
  padding: 8rem 1rem 6rem;
  font-size: 2rem;
}
main > section.onColor {
  max-width: 100%;
}
main > section.onColor.c01 {background-color:#708fbc;}
main > section.onColor.c02 {background-color:#256682;}
main > section.onColor > * {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}
main > section.onColor > p,
main > section.onColor > h2 {
  color: #ffffff;
}

main > section.onPhoto {
  max-width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  position: relative;
}
#featureSec {background-image: url(../img/back_5.jpg);}
#profileSec {background-image: url(../img/back_2.jpg);}

main > section.onPhoto::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
main > section.onPhoto.blackBack::before {background-color: rgba(255,255,255,0.8);}
main > section.onPhoto.whiteBack::before {background-color: rgba(255,255,255,0.8);}
main > section.onPhoto > * {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
main > section.onPhoto.blackBack > p,
main > section.onPhoto.blackBack > h2 {
  color: #ffffff;
}
main > section.onPhoto.whiteBack > p,
main > section.onPhoto.whiteBack > h2 {
  color: #111111;
}


main > section h2 {
  margin-bottom: 8rem;
  text-align: center;
  font-size: 3.6rem;
  position: relative;
}
main > section h2::after {
  background-color: var(--secondaryColor);
  content: "";
  width: 80px;
  height: 6px;
  position: absolute;
  left: 50%;
  bottom: -12px;
  margin-left: -40px;
  border-radius: 10px;
}
main > section p {
  margin-bottom: 2rem;
}
figure {
  margin: 0 auto 3rem;
}
figure img {
  width: 100%;
}
.w708 {
  width: 708px;
  max-width: 100%;
}
.w896 {
  width: 896px;
  max-width: 100%;
}
figcaption {
  margin-top: 0.5rem;
  text-align: right;
  font-size: 1.2rem;
}
main > section > ol:not(.qa),
main > section > ul:not(.qa) {
  border: 1px solid #dddddd;
  background-color: #fefefe;
  margin-bottom: 2rem;
  padding: 2rem;
  border-radius: 8px;
  font-weight: bold;
}
main > section ol li,
main > section ul li {
  font-size: 1.8rem;
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}
main > section > section {
  border: 1px solid #dddddd;
  background-color: #fefefe;
  margin: 2rem auto 4rem;
  padding: 3rem 4rem 4rem;
  border-radius: 8px;
}
main > section > section h3 {
  margin-bottom: 3.6rem;
  text-align: center;
  font-size: 2.8rem;
  color: var(--catchColor);
}
.btn {
  margin: 6rem 0 1rem;
  text-align: center;
}
.btn .recommend {
  display: block;
  text-align: center;
  font-size: 1.6rem;
}
.btn .star {
  color: #ffcc00;
}
.btn a {
  display: inline-block;
  padding: 1rem 4rem;
  font-size: 1.6rem;
}
.btn a img {
  display: inline-block;
  width: 320px;
  max-width: 100%;
}

/**/
.rightPhoto,
.leftPhoto,
.qa dt,
.qa dd {
	position: relative;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 1.6rem;
}
.leftPhoto,
.qa dt {
	margin: 0 80px 20px;
	padding: 1.4rem 2rem;
  background: #fff1de;
  font-weight: bold;
}
#voiceSec .leftPhoto {background: #aef47d;text-indent:0;}

.rightPhoto,
.qa dd {
	margin: 0 80px 80px;
	padding: 2rem 2rem 0.1rem;
	background: #f7f7f7;
}
#voiceSec .rightPhoto {padding: 1.4rem 2rem;text-indent:0;}

.rightPhoto,
.leftPhoto {
	margin: 0 80px 40px;
  font-weight: normal;
}

/* 吹き出し▶︎ */
.rightPhoto::before,
.leftPhoto::before,
.qa dt::before,
.qa dd::before {
	position: absolute;
	z-index: 99;
	top: 1rem;
	display: inline-block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
/* 質問吹き出し▶︎ */
.leftPhoto::before,
.qa dt::before {
	left: -12px;
	border-width: 8px 12px 8px 0;
	border-color: transparent #f9ead3 transparent transparent;
}
#voiceSec .leftPhoto::before {border-color: transparent #aef47d transparent transparent;}

/* 答え吹き出し▶︎ */
.rightPhoto::before,
.qa dd::before {
	right: -12px;
	border-width: 8px 0 8px 12px;
	border-color: transparent transparent transparent #e7e7e7;
}
/* アイコン */
.rightPhoto::after,
.leftPhoto::after,
.qa dt::after,
.qa dd::after {
	position: absolute;
  top: 0;
	width: 60px;
	height: 60px;
}
/* 質問アイコン */
.leftPhoto::after,
.qa dt::after {
	left: -80px;
  content: '';
  background-image: url(../img/ase_man_01.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
/* 回答アイコン */
.rightPhoto::after,
.qa dd::after {
	right: -80px;
  content: '';
  background-image: url(../img/doc_woman_01.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.qa .ase_man_01::after {background-image: url(../img/ase_man_01.png);}
.qa .ase_man_02::after {background-image: url(../img/ase_man_02.png);}
.qa .ase_woman_01::after {background-image: url(../img/ase_woman_01.png);}
.qa .ase_woman_02::after {background-image: url(../img/ase_woman_02.png);}
.qa .hatena_man_01::after {background-image: url(../img/hatena_man_01.png);}
.qa .hatena_woman_01::after {background-image: url(../img/hatena_woman_01.png);}
.qa .shinpai_man_01::after {background-image: url(../img/shinpai_man_01.png);}
.qa .shinpai_woman_01::after {background-image: url(../img/shinpai_woman_01.png);}
.qa .tere_man_01::after {background-image: url(../img/tere_man_01.png);}

.qa .man_01::after {background-image: url(../img/man_01.png);}
.qa .man_02::after {background-image: url(../img/man_02.png);}
.qa .man_03::after {background-image: url(../img/man_03.png);}
.qa .woman_01::after {background-image: url(../img/woman_01.png);}
.qa .woman_02::after {background-image: url(../img/woman_02.png);}

.qa .take_01::after {background-image: url(../img/take_01.jpg);}

.qa.hitokoto dd {
	margin: 40px 80px 40px 0px;
}


.shadow {
  position: relative;
  background-color: #fefefe;
}
.shadow:before,
.shadow:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(45deg, orange, yellow, green, cyan, blue, violet);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-size: 400%;
  z-index: -1;
  animation: shadow 20s linear infinite;
  border-radius: 8px;
}
@keyframes shadow {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.shadow:after {
  filter: blur(2px) ;
}

.shadow h3 {
  margin-bottom: 4rem;
  font-weight: bold;
}
.shadow li {
  margin-bottom: 1.6rem;
}

#imageList {
  display: flex;
  justify-content: space-around;
}
#imageList li {
  padding-left: 0;
  text-indent: 0;
}

/* フッタ
----------------------------------------------------*/
footer {
  padding: 0.6rem 0;
  background-color: var(--primaryColor);
  color: #fefefe;
  text-align: center;
}


/* ページTOPへ戻るボタン
----------------------------------------------------*/
#goPageTop {
  display: none;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 90;
}
#goPageTop a {
  display: block;
  padding: 12px 20px;
  border: 1px solid var(--secondaryColor);
  background: var(--secondaryColor);
  color: rgba(255,255,255,1.0);
  text-decoration: none;
}
#goPageTop a:hover {
  border: 1px solid var(--secondaryColor);
  background: var(--secondaryColor);
  color: rgba(255,255,255,1.0);
}


/* 表示非表示操作
----------------------------------------------------*/
.pc_only_block {
  display: block;
}
.pc_only_inline {
  display: inline;
}
.pc_only_inlineblock {
  display: inline-block;
}
.sp_only_inlineblock,
.sp_only_inline,
.sp_only_block {
  display: none;
}


/* スマホ & タブレット
----------------------------------------------------*/
@media screen and (max-width:740px) {
  /* 表示非表示操作
	----------------------------------------------------*/
  .pc_only_inlineblock,
  .pc_only_inline,
  .pc_only_block {
    display: none;
  }
  .sp_only_block {
    display: block;
  }
  .sp_only_inline {
    display: inline;
  }
  .sp_only_inlineblock {
    display: inline-block;
  }

  .attention {
    font-size: 1rem;
  }
  main > .attention {
    margin: 0 2rem;
  }
  #headerSec {
    margin: 0 0 2rem 0;
    padding: 4rem 2rem 2rem;
  }
  #headerSec div {
    min-width: 0px;
    max-width: 100%;
    padding: 0rem 2rem 2rem;
  }
  #headerSec p.badge {
    top: -3rem;
    padding: 0.8rem 0.6rem 0.6rem;
    font-size: 1.8rem;
  }
  #headerSec p.tagline {
    padding: 0.4rem 1rem 0.3rem;
    font-size: 1.1rem;
  }
  #headerSec h1 {
    font-size: 3rem;
  }
  #headerSec ul {
    flex-wrap: wrap;
  }
  #headerSec ul li {
    padding: 0.2rem 0.3rem 1rem;
    font-size: 1.2rem;
  }
  #headerSec ul li:nth-of-type(2) {
    margin: 0 0.5rem;
  }
  #headerSec ul li img {
    max-width: 100%;
  }
  /**/
  main > section {
    padding: 4rem 2rem 3rem;
  }
  main > section h2 {
    margin-bottom: 4rem;
    font-size: 2.2rem;
  }
  main > section p {
    font-size: 1.6rem;
  }
  main > section > section {
    padding: 2.8rem 1.6rem 3rem;
  }
  main > section > section h3 {
    margin-bottom: 1.6rem;
    font-size: 2rem;
  }
  .btn {
    margin: 4rem 0 1rem;
  }
  .btn a {
    padding: 1rem 0;
  }
  main > section > ol:not(.qa),
  main > section > ul:not(.qa) {
    padding: 1.2rem 1rem;
  }
  main > section ol:not(.qa) li,
  main > section ul:not(.qa) li {
    font-size: 1.4rem;
    padding-left: 1.4rem;
    text-indent: -1.4rem;
  }
  .shadow h3 {
    font-size: 2rem;
  }
  .shadow li {
    font-size: 1.4rem;
  }
  .qa dt {
    margin: 0 0px 20px 50px;
    font-size: 1.4rem;
  }
  .leftPhoto {
    margin: 0 0px 40px 50px;
    font-size: 1.4rem;
  }
  .qa dd {
    margin: 0 50px 60px 0px;
    font-size: 1.4rem;
  }
  .rightPhoto {
    margin: 0 50px 40px 0px;
    font-size: 1.4rem;
  }
  .leftPhoto::after, .qa dt::after {
    left: -70px;
  }
  .rightPhoto::after, .qa dd::after {
    right: -70px;
  }
  .qa.hitokoto dd {
    margin: 40px 50px 40px 0px;
  }
  .qa dt::after,
  .qa dd::after {
    width: 40px;
    height: 40px;
  }
  .qa dt::after {
    left: -50px;
  }
  .qa dd::after {
    right: -50px;
  }

  #imageList {
    display: block;
  }

}