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


@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
/*
font-family: 'Zen Kaku Gothic New', sans-serif;
Regular 400
Medium 500
*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');
/*
font-family: 'Zen Maru Gothic', sans-serif;
Medium 500
Bold 700
*/

@font-face {
	font-family:'DINPro-Regular';
	src:url('/common/fonts/DINPro-Regular.woff2') format('woff2'),url('/common/fonts/DINPro-Regular.woff') format('woff'),
}


/* ---------- RESET ---------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}

img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html,body{
	width: 100%;
	height: 100%;
	min-height:100%;
	z-index:1;
	position:relative;
}
body{
    font-family: 'Zen Kaku Gothic New','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
    color:#000;
	font-weight:400;
    background: #FFF;
    line-height: 1;
}


/*-----------------------------*/

#loader-bg{
    display:block;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:1000;
	background: #FFF;
}



/*-----------------------------*/

/* standard */
.fade,
.fade.delighter{
	opacity:0;
	position: relative;
	top: 40px;
	-webkit-transition:top 1.0s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.0s;
	transition:top 1.0s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.0s;
}
/* start */
.fade.delighter.started{
	opacity:1;
	top: 0;
}

/*-----------------------------*/


.feeling .header{
	width: 100%;
	padding:80px 0 0;
	position: relative;
}
.feeling .header h1{
	width: 530px;
	margin: 0 auto;
}
.feeling .header h2{
	text-align: center;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-top: 1.2em;
}
.feeling .header h2 br.res{display: none;}

.feeling .header .howto{
	position: absolute;
	width: 110px;
	top: 40px;
	right: 40px;
	z-index: 50;
}

.feeling .header .howto a{
	display: block;
}
.feeling .header .howto a .icon{
	width: 80%;
	margin: 0 auto;
}
.feeling .header .howto a p{
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: #000;
	margin-top: 12px;
}
@media(min-width:769px) {
.feeling .header .howto a p{-webkit-transition: color 0.4s;transition: color 0.4s;}
.feeling .header .howto a:hover p{color: #289E53;}
}


/*----------------------------------------------------*/


.feelingIndex{
	width: 100%;
	margin-top: 110px;
	/*background: rgba(0,0,0,0.1);*/
}
.feelingIndex .cardBox{
	width: 90%;
	margin: 0 auto;
	position: relative;
	padding: 80px 0 0;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #2655C7;
	text-align: center;
	/*background: rgba(0,0,0,0.1);*/
}
.feelingIndex .cardBox h2{
	font-size: 30px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	-webkit-transition-delay:0.5s;
	transition-delay:0.5s;
}
.feelingIndex .cardBox.flipped h2{
	opacity: 0;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}

.feelingIndex .cardBox h2 br{display: none;}

.feelingIndex .cardBox h3{
	font-size: 46px;
	margin: 0 auto;
	position: absolute;
	top: -0.2em;
	left: 0;
	right: 0;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}
.feelingIndex .cardBox.flipped h3{
	opacity: 1;
	-webkit-transition-delay:0.5s;
	transition-delay:0.5s;
}

.feelingIndex .cardBox .card{
	width: 350px;
	margin: 0 auto;
	position: relative;
}
.feelingIndex .cardBox .card .front,
.feelingIndex .cardBox .card .back{
	position : absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: transform 1.0s;
	transition: transform 1.0s;
	z-index: 20;
	-webkit-backface-visibility : hidden;
	backface-visibility : hidden;
}

.feelingIndex .cardBox .card .turnOver{cursor: pointer;}

.feelingIndex .cardBox .card div{position: relative;}
.feelingIndex .cardBox .card .back{
	-webkit-transform : rotateY(-180deg);
	transform : rotateY(-180deg);
}
.feelingIndex .cardBox.flipped .card .front{
	-webkit-transform : rotateY(180deg);
	transform : rotateY(180deg);
}
.feelingIndex .cardBox.flipped .card .back{
	-webkit-transform : rotateY(0deg);
	transform : rotateY(0deg)
}
.feelingIndex .cardBox .card .bk{position: relative;z-index: 1;}



.feelingIndex .cardBox .returnCard{
	position: absolute;
	bottom: 120px;
	left: calc(50% + 195px);
	width: 50px;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	-webkit-transition: opacity 0.5s, visibility 0.5s;
	transition: opacity 0.5s, visibility 0.5s;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}
.feelingIndex .cardBox.flipped .returnCard{
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay:0.8s;
	transition-delay:0.8s;
}
.feelingIndex .cardBox .returnCard .icon{
	width: 100%;
	background: #17A8FE;
	border-radius: 50%;
}
.feelingIndex .cardBox .returnCard p{
	color: #17A8FE;
	font-size: 15px;
	text-align: center;
	line-height: 1.2;
	margin-top: 0.3em;
	white-space: nowrap;
}

.feelingIndex .cardBox .nextBT{
	width: 100%;
	margin: 60px auto 0;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0.5s;
	transition: opacity 0.5s, visibility 0.5s;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}
.feelingIndex .cardBox.flipped .nextBT{
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay:0.8s;
	transition-delay:0.8s;
}
.feelingIndex .cardBox .nextBT a{
	font-size: 30px;
	color: #FFF;
	letter-spacing: 0.07em;
	display: inline-block;
	background: #17A8FE;
	padding: 0.5em 2.7em;
	border-radius: 70px;
}


/*------------------------------------------------------------------------------------------*/


.feelingDetail{
	width: 95%;
	max-width: 1020px;
	margin: 100px auto 0;
}
.feelingDetail .answer{
	width: 100%;
	margin: 0 auto 120px;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	align-items: center;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.feelingDetail .answer .illust{
	width: 50%;
	text-align: center;
}
.feelingDetail .answer .illust p{width: 75%;margin: 0 auto;}
.feelingDetail .answer .illust h3{font-size: 35px;}

.feelingDetail .answer .text{
	width: 50%;
	text-align: center;
}
.feelingDetail .answer .text h2{
	font-size: 40px;
	line-height: 1.5;
}
.feelingDetail .answer .text h2 em{
	font-size: 1.5em;
}
.f01 .feelingDetail .answer .text h2 em{color: #FF5B1C;}
.f02 .feelingDetail .answer .text h2 em{color: #7F92C9;}
.f03 .feelingDetail .answer .text h2 em{color: #FFD011;}
.f04 .feelingDetail .answer .text h2 em{color: #73CA52;}


/*----------*/


.feelingDetail .parent{
	margin: 150px auto 0;
}
.feelingDetail .parent .parentHeader{
	width: 90%;
	margin: 0 auto;
	padding-top: 150px;
	position: relative;
	text-align: center;
}
.feelingDetail .parent .parentHeader::before{
	content: '';
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 5px;
	background: url("../images/parent_line.svg") center center no-repeat;
	background-size: 100%;
}

.feelingDetail .parent .parentHeader .title{
	position: relative;
	display: inline-block;
	padding: 50px 0 110px;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	letter-spacing: 0;
}
.feelingDetail .parent .parentHeader .title h2{font-size: 44px;}

.feelingDetail .parent .parentHeader .title .illust{position: absolute;z-index: 50;}
.feelingDetail .parent .parentHeader .title .illust.i01{width: 41px;right: 0px;top: 0px;}
.feelingDetail .parent .parentHeader .title .illust.i02{width: 460px;left:50%;margin-left:-230px;bottom:0;}

.feelingDetail .parent .parentHeader .lead{
	margin-top: 70px;
	font-weight: 500;
	font-size: 19px;
	letter-spacing: 0.03em;
	line-height: 2.1;
	text-align: left;
}


/*----------*/

.feelingDetail .parent .image{
	width: 85%;
	margin: 60px auto 75px;
}

/*----------*/

.feelingDetail .parent .example{
	width: 90%;
	margin: 0 auto;
}
.feelingDetail .parent .example h3{
	text-align: center;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-size: 30px;
	position: relative;
}
.f01 .feelingDetail .parent .example h3{color: #FF5B1C;}
.f02 .feelingDetail .parent .example h3{color: #7F92C9;}
.f03 .feelingDetail .parent .example h3{color: #FFD011;}
.f04 .feelingDetail .parent .example h3{color: #73CA52;}


.feelingDetail .parent .example h3 span{
	position: relative;
	z-index: 10;
	background: #FFF;
	display: inline-block;
	padding: 0 0.8em;
}
.feelingDetail .parent .example h3::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: #FF5B1C;
}
.f01 .feelingDetail .parent .example h3::after{background: #FF5B1C;}
.f02 .feelingDetail .parent .example h3::after{background: #7F92C9;}
.f03 .feelingDetail .parent .example h3::after{background: #FFD011;}
.f04 .feelingDetail .parent .example h3::after{background: #73CA52;}


.feelingDetail .parent .example .exampleBody{
	width: 100%;
	font-weight: 500;
	font-size: 19px;
	letter-spacing: 0.03em;
	line-height: 1.5;
	margin: 60px auto 150px;
}
.feelingDetail .parent .example .exampleBody p{
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 1.2em;
}


/*----------*/

.feelingDetail .backBT{
	width: 100%;
	text-align: center;
}
.feelingDetail .backBT a{
	display: inline-block;
	font-size: 28px;
	border: 3px solid;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	padding: 0.6em 1em;
	border-radius: 60px;
	-webkit-transition: background 0.4s;
	transition: background 0.4s;
}

.f01 .feelingDetail .backBT a{border-color: #FF5B1C;color: #FF5B1C;}
.f02 .feelingDetail .backBT a{border-color: #7F92C9;color: #7F92C9;}
.f03 .feelingDetail .backBT a{border-color: #FFD011;color: #FFD011;}
.f04 .feelingDetail .backBT a{border-color: #73CA52;color: #73CA52;}

.feelingDetail .backBT a span{
	width: 1.25em;
	display: inline-block;
	margin-left: 0.3em;
}
@media(min-width:769px) {
.f01 .feelingDetail .backBT a:hover{background: #FFDED1;}
.f02 .feelingDetail .backBT a:hover{background: #E5E9F4;}
.f03 .feelingDetail .backBT a:hover{background: #FFF6CF;}
.f04 .feelingDetail .backBT a:hover{background: #E3F5DC;}
}



/*------------------------------------------------------------------------------------------*/



footer{
	width:100%;
	font-size:13px;
	font-family:'DINPro-Regular';
	text-align:center;
	position: relative;
	padding:220px 0 50px;
}
footer .illust{
	position: absolute;
	bottom: 30px;
	left: 30px;
	z-index: 10;
	width: 350px;
}

/*------------------------------------------------------------------------------------------*/


.modalHowTo{
	width: 80%;
	max-width: 950px !important;
	background: #FFF;
	position: relative;
	border-radius: 30px;
	display: none;
	padding: 8vh 0;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.modalHowTo .sholder{
	position: absolute;
	top: 25px;
	left: 25px;
	width: 20%;
}
.modalHowTo h2{
	text-align: center;
	font-size: 37px;
	font-weight: 700;
	padding-left: 40px;
}
.modalHowTo h2 span{
	width: 60px;
	display: inline-block;
	vertical-align: bottom;
	padding-left: 10px;
}

.modalHowTo .howToBody{
	width: 80%;
	margin: 5vh auto 0;
}
.modalHowTo .howToBody p{
	font-size: 19px;
	line-height: 1.8;
	margin-top: 1em;
}

.modalHowTo .howToBody h3{
	font-size: 23px;
	line-height: 1.6;
	font-weight: 700;
	margin-top: 0.4em;
	text-indent: -1em;
	padding-left: 1em;
}
.modalHowTo .howToBody h3:first-of-type{margin-top: 0.8em;}
.modalHowTo .howToBody h3 span{background: linear-gradient(transparent 70%, #9AD9FF 70%);}
.modalHowTo .howToBody h3 br{display: none;}

.modalHowTo .fancybox-close-small{
	position: fixed;
	top: 0;
	right: 0;
	width: 110px;
	height: 110px;
	padding: 0;
}
.modalHowTo .fancybox-close-small svg path{fill:#FFF;}




/*------------------------------------------------------------------------------------------*/





@media(max-width: 1080px) {

.feeling .header{padding-top:70px;}
.feeling .header h1{width: 470px;}
.feeling .header h2{font-size: 25px;}
.feeling .header .howto{width: 100px;top: 40px;right: 15px;}
.feeling .header .howto a p{font-size: 18px;margin-top: 8px;}


/*-----------*/

.feelingIndex{margin-top: 90px;}

.feelingIndex .cardBox{padding-top: 70px;}
.feelingIndex .cardBox h2{font-size: 26px;}
.feelingIndex .cardBox h3{font-size: 40px;}

.feelingIndex .cardBox .nextBT{margin-top: 50px;}
.feelingIndex .cardBox .nextBT a{font-size: 26px;}

/*-----------*/

.feelingDetail{margin-top: 80px;width: 85%;}

.feelingDetail .answer{margin-bottom: 100px;}
.feelingDetail .answer .illust h3{font-size: 32px;}
.feelingDetail .answer .text h2{font-size: 35px;}


.feelingDetail .parent{margin-top: 120px;}
.feelingDetail .parent .parentHeader{width: 100%;padding-top:100px;}


.feelingDetail .parent .parentHeader .title{padding: 45px 0 100px;}
.feelingDetail .parent .parentHeader .title h2{font-size: 40px;}
.feelingDetail .parent .parentHeader .title .illust.i02{width: 420px;margin-left:-210px;}

.feelingDetail .parent .parentHeader .lead{font-size: 18px;margin-top: 60px;}

.feelingDetail .parent .example{width: 100%;}
.feelingDetail .parent .example h3{font-size: 28px;}
.feelingDetail .parent .example .exampleBody{font-size: 18px;}


.feelingDetail .backBT a{font-size: 25px;}

/*-----------*/

.modalHowTo .sholder{width: 25%;}
.modalHowTo h2{font-size: 35px;padding-left: 35px;}
.modalHowTo .howToBody{width: 85%;}
.modalHowTo .howToBody p{font-size: 18px;}
.modalHowTo .howToBody h3{font-size: 20px;}

/*-----------*/

footer .illust{width: 280px;}

}



@media (max-width: 850px) {

}


/*==========================================================*/



@media(max-width: 768px) {


.feeling .header{padding-top:10vw;}
.feeling .header h1{width: 410px;}
.feeling .header h2{font-size: 23px;}

.feeling .header .howto{
	position: relative;
	top: 0;
	right:0;
	margin: 10vw auto 0;
}

/*-----------*/

.feelingIndex{margin-top: 12vw;}

.feelingIndex .cardBox{padding-top: 65px;}
.feelingIndex .cardBox h2{font-size: 24px;}
.feelingIndex .cardBox h3{font-size: 38px;}

.feelingIndex .cardBox .card{width: 320px;}

.feelingIndex .cardBox .returnCard{bottom: 95px;left: calc(50% + 185px);width: 45px;}
.feelingIndex .cardBox .returnCard p{font-size: 14px;}


.feelingIndex .cardBox .nextBT{margin-top: 40px;}
.feelingIndex .cardBox .nextBT a{font-size: 24px;}

/*-----------*/


.feelingDetail{margin-top: 11vw;width: 90%;}

.feelingDetail .answer{margin-bottom: 13vw;display: block;}
.feelingDetail .answer .text{width: 100%;}
.feelingDetail .answer .text h2{font-size: 33px;}
.feelingDetail .answer .illust{width: 100%;margin-top: 5vw;}
.feelingDetail .answer .illust p{width: 70%;max-width: 350px;}
.feelingDetail .answer .illust h3{font-size: 31px;}


.feelingDetail .parent{margin-top: 15vw;}

.feelingDetail .parent .parentHeader{padding-top:15vw;}
.feelingDetail .parent .parentHeader .title{padding: 35px 0 80px;}
.feelingDetail .parent .parentHeader .title h2{font-size: 36px;}
.feelingDetail .parent .parentHeader .title .illust.i01{width: 36px;right: -30px;}
.feelingDetail .parent .parentHeader .title .illust.i02{width: 360px;margin-left:-180px;}

.feelingDetail .parent .parentHeader .lead{font-size: 16px;margin: 40px auto 0;width: 90%;}

.feelingDetail .parent .image{width: 90%;margin: 5vw auto 10vw;}

.feelingDetail .parent .example{width: 90%;}
.feelingDetail .parent .example h3{font-size: 26px;}
.feelingDetail .parent .example .exampleBody{font-size: 16px;margin: 50px auto 15vw;}

.feelingDetail .backBT a{font-size: 23px;}


/*-----------*/

footer{padding:20vw 0 50px;}
.fTop footer{padding-bottom:85px;}
footer .illust{bottom: 40px;left:0;right: 0;margin: 0 auto;}
footer .illust img{position: relative;left: -30px;}

/*-----------*/

.modalHowTo{width: 90%;border-radius: 4vw;padding: 8vw 0;}
.modalHowTo .sholder{top: 2.5vw;left: 2.5vw;width: 27%;}
.modalHowTo h2{font-size: 33px;padding-left: 15px;}
.modalHowTo h2 span{width: 50px;padding-left: 8px;}
.modalHowTo .howToBody{width: 90%;margin-top: 5%;}
.modalHowTo .howToBody p{font-size: 17px;}
.modalHowTo .howToBody h3{font-size: 19px;}

.modalHowTo .fancybox-close-small{position: absolute;width: 80px;height:80px;}
.modalHowTo .fancybox-close-small svg path{fill:#000;}

}







@media(max-width: 650px) {

.feeling .header{padding-top:15vw;}
.feeling .header h1{width: 80%;max-width: 400px;}
.feeling .header h2{font-size: 21px;}

/*.feeling .header h2 br.res{display: block;}*/

/*-----------*/

.feelingIndex{margin-top: 15vw;}
.feelingIndex .cardBox{padding-top: 60px;}
.feelingIndex .cardBox h2{font-size: 22px;}
.feelingIndex .cardBox h3{font-size: 34px;}

.feelingIndex .cardBox .card{width: 300px;}
.feelingIndex .cardBox .returnCard{
	position: relative;
	bottom: 0;
	left: 0;
	margin: 5vw auto 0;
	width: 100%;
	text-align: center;
}
.feelingIndex .cardBox .returnCard .icon{width: 45px;margin: 0 auto;}
.feelingIndex .cardBox .returnCard p br{display: none;}
.feelingIndex .cardBox .returnCard p{font-size: 14px;}

.feelingIndex .cardBox .nextBT{margin-top: 5vw;}
.feelingIndex .cardBox .nextBT a{width: 300px;padding: 0.7em 0;font-size: 22px;}

/*-----------*/


.feelingDetail{margin-top: 15vw;padding-bottom: 10vw;}


.feelingDetail .answer .text h2{font-size: 30px;}
.feelingDetail .answer .illust{margin-top: 5vw;}
.feelingDetail .answer .illust p{max-width:400px;}
.feelingDetail .answer .illust h3{font-size: 29px;}

.feelingDetail .parent{margin-top: 17vw;}
.feelingDetail .parent .parentHeader::before{background-size: 140%;}
.feelingDetail .parent .parentHeader .title h2{font-size: 33px;}

.feelingDetail .parent .example{width: 95%;}
.feelingDetail .parent .example .exampleBody{margin: 50px auto 22vw;}


.feelingDetail .backBT a{border-width: 2px;padding: 0.6em 2em;}



/*-----------*/

.modalHowTo{padding: 6vw 0 8vw;}
.modalHowTo .sholder{display: none;}
.modalHowTo h2{font-size: 27px;padding-left: 10px;}
.modalHowTo h2 span{width: 45px;padding-left: 8px;}
.modalHowTo .howToBody{width: 90%;margin-top: 5%;}
.modalHowTo .howToBody p{font-size: 15px;line-height: 1.7;margin-top: 1.3em;}
.modalHowTo .howToBody h3{font-size: 17px;margin-top: 0.7em;}
.modalHowTo .howToBody h3:first-of-type{margin-top: 1.0em;}
.modalHowTo .howToBody h3 br{display: block;}
.modalHowTo .fancybox-close-small{width: 60px;height: 60px;}

}




@media(max-width: 480px) {

.feeling .header h1{width: 77%;}

.feeling .header h2{font-size: 18px;}

.feeling .header .howto{width: 90px;}
.feeling .header .howto a p{font-size: 16px;margin-top: 7px;}

/*-----------*/

.feelingIndex{margin-top: 15vw;}

.feelingIndex .cardBox{padding-top: 68px;}
.feelingIndex .cardBox h2{font-size: 20px;line-height: 1.4;}
.feelingIndex .cardBox h2 br{display: block;}
.feelingIndex .cardBox h3{font-size: 32px;top: 0.2em;}

.feelingIndex .cardBox .card{width: 275px;}

.feelingIndex .cardBox .returnCard{margin-top: 8vw;}

.feelingIndex .cardBox .nextBT{margin-top: 8vw;}
.feelingIndex .cardBox .nextBT a{width: 285px;}


/*-----------*/


.feelingDetail .answer{margin-bottom: 16vw;}
.feelingDetail .answer .text h2{font-size: 29px;}
.feelingDetail .answer .text h2 em{font-size: 1.4em;}
.feelingDetail .answer .illust{margin-top: 7vw;}
.feelingDetail .answer .illust p{width:75%;}
.feelingDetail .answer .illust h3{font-size: 27px;}

.feelingDetail .parent{margin-top: 25vw;}

.feelingDetail .parent .parentHeader .title{padding: 30px 0 70px;}
.feelingDetail .parent .parentHeader::before{background-size: 180%;}
.feelingDetail .parent .parentHeader .title h2{font-size: 30px;}
.feelingDetail .parent .parentHeader .title .illust.i01{width: 30px;right: -25px;}
.feelingDetail .parent .parentHeader .title .illust.i02{width: 300px;margin-left:-150px;}
.feelingDetail .parent .parentHeader .lead{font-size: 15px;margin-top: 30px;width: 100%;}

.feelingDetail .parent .image{width: 100%;margin: 8vw auto 18vw;}

.feelingDetail .parent .example{width: 100%;}
.feelingDetail .parent .example h3{font-size: 24px;}
.feelingDetail .parent .example .exampleBody{font-size: 15px;margin: 40px auto 25vw;}


.feelingDetail .backBT a{padding: 0.6em 0em;width: 85%;font-size: 21px;}

/*-----------*/

footer{padding:25vw 0 40px;font-size:12px;}
.fTop footer{padding-bottom:85px;}
footer .illust{bottom: 40px;width: 250px;}
footer .illust img{position: relative;left: -25px;}

/*-----------*/

.modalHowTo{padding: 9vw 0 9vw;}
.modalHowTo h2{font-size: 27px;padding-left: 0;}
.modalHowTo .howToBody h3{font-size: 16px;}
.modalHowTo .fancybox-close-small{width: 50px;height: 50px;}

}


@media(max-width: 360px) {

.feelingIndex .cardBox h2{font-size: 19px;}
.feelingIndex .cardBox h3{font-size: 31px;top: 0.2em;}
.feelingIndex .cardBox .card{width: 270px;}
.feelingIndex .cardBox .nextBT a{width: 270px;}

}