@charset "UTF-8"; @import"https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,600,700&subset=japanese&font-display+swap"; /* reset */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p { margin: 0; padding: 0; font-size: 100%; }
html { font-size: 62.5%; -ms-touch-action: manipulation; touch-action: manipulation; }
body { font-size: 1.4rem; font-weight: 400; -webkit-font-kerning: auto; font-kerning: auto; letter-spacing: .04em; text-rendering: optimizeLegibility; line-height: 2; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font: 14px/23px 'Droid Sans', sans-serif; }
@media(min-width:30em) { 
  body { font-size: 1.5rem; }
}
@media(min-width:48em) {
  body { font-size: 1.6rem; background: #FFF; }
}
a { color: #000;}
a:hover, button:hover ,img:hover { transition: all .3s ease-in-out; }
a:hover img {opacity: .5; transition: all .3s ease-in-out; }
img { border: 0; virtical-align: bottom; line-height: 0; display: block;}
button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
ul, ol { list-style: none; }
input,textarea { -webkit-appearance: none; border-radius: 0; }
::placeholder { color: #CCC; }
* html .clearfix { height: 1px; }
#wrap { width: 100%; overflow: hidden; line-height: 2; padding: 0; }
#page_top {position: fixed; bottom: 120px; right: 20px; z-index: 999;  background: rgba(255,192,222,1.00); color: #fff; text-align: center; text-decoration: none; width: 30px; height: 30px; }
#page_top i { color: #FFF; }
#page_top:hover { background: rgb(244 93 131 / 50%); text-decoration: none; }
.view_pc,.view_sp {display: none;}
#wrap section { position: relative; }
#footer { font-size: 14px; text-align: center; color: #575757; padding: 20px 0; margin-bottom: 20%; }

header { border-bottom: 1px solid #CCC; margin-bottom: 2%; padding: 0 2%; }
strong, b { font-weight: bold; }
img { display: inline-block; }
.cont { padding: 2%; }
.cont section { padding: 2%; }
.pr span { font-size: 10pt; color: #999;  }
.talk_box {position: relative; overflow: hidden; margin: 5% 0 0 0;}
.article img.aligncenter {margin-top:0;}
.thum-img {position: absolute;overflow: hidden;top: 0; width: 80px;height: 80px; }
.thum-img-left {left: 0; }
.thum-img-right {right: 0;}
.thum-img img { border-radius: 50%;  }
.thum-name {position: absolute; width: 80px; text-align: center; top: 83px; color: #777; font-size: 10px; }
.thum-name-left {left: 0; }
.thum-name-right {right: 0; }
.talk_side {position: relative;float: left;margin: 0 105px 40px 105px; }
.talk_side-right {float: right;}
.talk_txt {position: relative; border-radius: 6px; color: #111; font-size: 15px; line-height: 1.7; padding: 18px; }
.talk_txt_bg1 { border: 2px solid #00FF3A;  background: #e8ffde; }
.talk_txt_bg2 { border: 2px solid #FF65BC;  background: #FFF2F9; }
.talk_txt_bg3 { border: 2px solid #0061FF;  background: #E2F1FF; }
.talk_txt_bg4 { border: 2px solid #FBCEFF;  background: #FBCEFF; }
.talk_txt_bg5 { border: 2px solid #A9FFD4;  background: #A9FFD4; }
.talk_txt > p:last-of-type { padding-bottom: 0;margin-bottom: 0; }
.talk_txt:before {content:"";position: absolute;border-style: solid;top: 16px; z-index: 3;}
.talk_txt:after {content:"";position: absolute;border-style: solid;top: 15px;z-index: 2; }
.talk_txt-left.talk_txt_bg1:before {left: -7px;border-width: 7px 10px 7px 0; border-color: transparent #e8ffde transparent transparent; }
.talk_txt-left.talk_txt_bg1:after {left: -10px; border-width: 8px 10px 8px 0; border-color: transparent #00FF3A transparent transparent; }
.talk_txt-right.talk_txt_bg2:before {right: -7px;border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #FFF2F9; }
.talk_txt-right.talk_txt_bg2:after {right: -10px; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent #FF65BC; }
.talk_txt-left.talk_txt_bg3:before {left: -7px;border-width: 7px 10px 7px 0; border-color: transparent #E2F1FF transparent transparent; }
.talk_txt-left.talk_txt_bg3:after {left: -10px; border-width: 8px 10px 8px 0; border-color: transparent #0061FF transparent transparent; }
.talk_txt-left.talk_txt_bg4:before {left: -7px;border-width: 7px 10px 7px 0; border-color: transparent #FBCEFF transparent transparent; }
.talk_txt-left.talk_txt_bg4:after {left: -10px; border-width: 8px 10px 8px 0; border-color: transparent #FBCEFF transparent transparent; }
.talk_txt-right.talk_txt_bg5:before {right: -7px;border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #A9FFD4; }
.talk_txt-right.talk_txt_bg5:after {right: -10px; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent #A9FFD4; }
.txt_right { text-align: right; }
.txt_center { text-align: center; }    
.txt_color_red { color: #FF003F; }
.txt_color_blue { color: #006CFF; }
.txt_color_purple { color: #3C008A; }
.txt_color_silver { color: #CCC; }
.txt_color_pink { color: #FF00A5;}
.size_8 { font-size: 8pt; }
.size_12 { font-size: 12pt; }
.size_14 { font-size: 14pt; }
.size_16 { font-size: 16pt; }
.txt_bg_1 { background: #FDFFB1; }
.txt_bg_2 { background: #B4FFA0; }
.txt_p_1 { border-bottom: 1px solid #EEE; border-left: 5px solid #EEE; padding: 10px 0 10px 20px; margin: 5% 0; }
.m-1 { margin: 1% 0; }
.img { position: relative; margin:5% 0; }
.s_txt { position: absolute; left: 0; top: 0; z-index: 1; color: #FFF; font-size: 50px; width: 100%; line-height: 1.2; text-align: center; padding:15% 0 0 0;}
.s_txt span { font-size: 30px; }
.cta { width: 90%; margin: 5% auto; background: #FFFDF3; padding: 2%; border:1px solid #CCC; }
.cta_btn { width: 100%; margin: 5% auto; box-shadow:inset 0px 1px 0px 0px #d9fbbe; background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%); background-color:#b8e356; border-radius:6px; border:1px solid #83c41a; display:block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:15px 0; text-decoration:none; text-shadow:0px 1px 0px #86ae47; text-align: center; font-size: 20px; position: relative;  overflow: hidden; }
.cta_btn:hover { background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%); background-color:#a5cc52; }
.cta_btn:active { position:relative; top:1px; }  
.entry_wrap { background: #FEF5FF; border:1px solid #F93CFF; padding: 5% !important; margin: 5% 0; }
  @keyframes shiny { 
    0% {   transform: scale(0) rotate(25deg);   opacity: 0; }
    50% {   transform: scale(1) rotate(25deg);   opacity: 1; }
    100% {   transform: scale(50) rotate(25deg);   opacity: 0; }
  }
.cta_btn::after { content: ''; position: absolute; top: -100px; left: -100px; width: 50px; height: 50px; background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.merit { font-size: 12px; display: flex; margin: auto; padding: 10px 10px 10px 0; background: #0090FF; border-radius: 5px; flex-flow: wrap; justify-content: space-around; align-items: center; }
.cta_wrap { padding: 0 5%; }
.merit div:nth-child(1) { width: 35%; }
.merit div:nth-child(2) { width: 65%; }
.merit p {  font-size: 10px; text-align: center; color: #FFF; padding: 5px 0; font-weight: bold;  }
.merit img { display: block; width: 55px; margin: auto; }
.merit ul { background: #FFF; border-radius: 5px; padding: 10px; }
.merit li { padding: 5px 5px 5px 5px; border-bottom: 2px dotted #CCC; font-weight: bold; }
.merit li::before { content:""; display: inline-block; background: url("../images/icon-2.png") no-repeat; background-size: 100%; width: 15px; height: 15px; margin: 0 5px 0 0; vertical-align: middle; }
.point_title { display: inline-block; padding: 5px 10px; color: #FFA900; background: #FFF; border-radius: 120px; position: absolute; z-index: 999; top:-20px; }
.point { padding:20px 10px 10px 10px; margin: 30px 0 40px 0; border: 1px solid #ffbea9; background: #fffcdc; border-radius: 4px; font-weight: bold; position: relative; }
.point_1,.point_2 { display: inline-block; color: #FFF; font-size: 12px; border-radius: 4px; padding: 5px; margin: 3px 7px 3px 3px; }
.point_1 {background: #055fff;}
.point_2 {background: #000;}
.point li::before { content:""; display: inline-block; background: url("../images/icon-2.png") no-repeat; background-size: 100%; width: 15px; height: 15px; margin: 0 5px 0 0; vertical-align: middle; }
.kuchikomi_box { line-height: 1.5; padding: 5%; background: #FFF; margin: 10px; color: #000; }
.kuchikomi_box h3 { margin:0 0 3% 0; padding: 10px 0; text-align: center; border-bottom: 1px dotted #CCC; }
.kuchikomi_box { padding: 3%;}
.kuchikomi_box_in { width: 100%; padding: 3%; margin-bottom: 3%; background: rgba(244,244,244,1.00); display: table; }
.kuchikomi_thum { padding: 0 5px 0 0; width: 20%; display: table-cell; }
.kuchikomi_txt { font-size: 12px; padding: 3%; width: 100%; display: table-cell; vertical-align: top; position: relative; }
.kuchikomi_txt h4 { font-weight: normal; }
.kuchikomi_txt h4 > span { font-weight: normal; padding: 0 0 0 3%; }
.kuchikomi_txt h4 > span.female { color: #F00; }
.kuchikomi_sub_txt { color: #000; font-weight: 600; }
.kuchikomi_date { position: absolute; top: 2%; right: 0; color: #999; }
.kuchikomi_contents { padding: 2%; }
.cta_2 { padding: 5%; position: fixed; bottom:0; left: 0; z-index: 999 }
/* ///////////////////////////////////////////////////////////////////// 
// Media Queries
/////////////////////////////////////////////////////////////////////*/
/* PC */
@media (min-width: 500px){
  #page_top {bottom: 200px; }
}
@media (min-width: 768px) { 
  .view_pc { display: block;}
  #wrap { width: 750px; margin: auto; overflow: hidden; border-radius: 3px; box-shadow: 0 0px 20px rgba(0,0,0,0.2); }
  .size_12 { font-size: 15pt; }
  .size_14 { font-size: 16pt; }
  .size_16 { font-size: 22pt; }  
  .merit { font-size: 12pt; }
  .merit p {  font-size: 14pt; } 
  .merit li { padding: 15px; }
  .kuchikomi_txt { font-size: 15px; }
  .point { padding:30px 20px 20px 20px; }
  .cta_2 { left: inherit; width: 700px; padding: 2% }
}
/* SP */
@media (max-width: 480px) { 
  .view_sp {display: block;}
  .thum-img {width: 60px; height: 60px; }
  .thum-name {width: 60px; top: 62px; font-size: 9px; }
  .talk_side-left {margin: 0 0 30px 78px; }
  .talk_side-right {margin: 0 78px 30px 0; }
  .talk_txt {padding: 12px;}
  .cont section { padding: 0; }    
}
@media (max-width: 420px) {
  .cta_btn { width: 100%; margin: 5% auto;  }  
}