@charset "utf-8";


#uq-pagetop {
	display: none !important;
}

html,body,
header .glnav-fixed {
    min-width: 1020px;
    margin: 0 auto;
}
header,
footer {
    position: relative;
    z-index: 10;
}
#fnav, #order-nav { display: none !important; }
footer {
    margin-top: 0;
    background: url(/common2/images/bg_body.png) repeat left top;
}
footer > section.bg-white { margin-top: 0; }

#modal {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10000;
}
#modal .bg {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.90);
	overflow: hidden;
	height: 100%;
}
#modal .bg.wh {
	background-color:rgba(255,255,255,1.0);
}
#modal .btn {
	position:absolute;
	top:10px;
	right:10px;
	z-index:5;
}
#modal .wrap {
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	height:100%;
	z-index:2;
}
#modal .wrap .inner {
	height:100%;
	width:100%;
}
#modal .item {
	position: absolute;
    top: 50%;
    left: 50%;
	display:none;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
#modal .item:before {
	content:"";
	display:block;
}
#modal .item .item_wrap {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    box-sizing: border-box;
}
#modal .item .item_inner {
	position:relative;
	width:100%;
	height:100%;
	box-sizing: border-box;
}
#modal .item .item_inner .ytvideo_wrap {
	position: relative;
	width: 100%;
	padding-top: 56.5%;
}
#modal .item .item_inner .ytvideo_wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
#modal .item .item_inner .btn.close {
	display:block;
	position:absolute;
    top: -50px;
    right: 0;
	background-size:contain;
	width:36px;
	height:36px;
	cursor: pointer;
	background: url(../img/modal_icon_close.png) top center no-repeat;
	background-size: contain;
	border:none;
}
#modal .item .item_inner .btn.close:before {
	display: none;
}
#modal .item .item_inner .btn.close:hover { opacity:0.8; }
#modal .item .item_inner .imgwrap img { width: 100%; }


main {
	display: block;
	position: relative;
}
main figure {
	display: block;
    margin: 0;
	padding: 0;
}
main figure img {
	padding: 0;
	margin: 0;
}
main figure figcaption {
    font-size: 100%;
    line-height: 1.6rem;
    display: block;
    caption-side: bottom;
    text-align: left;
}

main .section {
	position: relative;
}
main .section {
	position: relative;
}
main .section .sec-inner {
	position: relative;
	width: 988px;
	height: 100%;
	margin: 0 auto;
}
main img { width: 100%; }

main .bg {
	padding: 0 0 100px;
	background: url(../img/bg.jpg) center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}

#mainvisual {
	height: 770px;
	background-color: #34c0de;
	overflow: hidden;
}
#mainvisual h1 {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1363px;
	margin-left: -681px;
}
#mainvisual .illust {
	position: absolute;
	bottom: 168px;
	left: 0;
	width: 495px;
}
#mainvisual .illust img { width: 100%; }
#mainvisual .illust.i1 { left: -3px; }
#mainvisual .illust.i2 { left: 500px; }
#mainvisual .note {
	position: absolute;
	bottom: 140px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #FFF;
}
#mainvisual .note small {
	font-size: 10px;
}
#mainvisual .link {
	position: absolute;
	left: 0;
	bottom: 30px;
	text-align: center;
	width: 100%;
}
#mainvisual .link a {
	position: relative;
	letter-spacing: normal;
	display: inline-block;
	background-color: #0094d5;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	border-radius: 50px;
	padding: 30px 0;
    width: 402px;
    font-size: 18px;
    line-height: 1em;
}
#mainvisual .link a > span {
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	font-size: inherit;
	vertical-align: middle;
} 
#mainvisual .link a .icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	display: inline-block;
	margin-left: 0.5em;
	height: 1em;
}
#mainvisual .link a .other {
	width: 1em;
	background:url(../img/btn_icon_other.png) center no-repeat;
	background-size: contain;
}

#anchor {
	background-color: #FFF;
	color: #000000;
}
#anchor .sec-inner { width: 100%; }
#anchor .accordion { height: 0; overflow: hidden; }
#anchor .wrap {
	width: 828px;
	margin: 0 auto;
	padding: 78px 0;
}
#anchor .button { width: 100%; }
#anchor .button a {
	display: inline-block;
	width: 100%;
	height: 80px;
	color: #FFF;
	background-color: #0094d5;
	text-align: center;
	vertical-align: middle;
	padding: 30px 0;
	box-sizing: border-box;
}
#anchor .button a .txt {
	display: inline-block;
	width: 234px;
	position: relative;
}
#anchor .button a .icon {
	position: absolute;
	top: 50%;
	right: -40px;
	display: inline-block;
	width: 32px;
	height: auto;
	padding: 32px 0 0;
	margin: -16px 0 0;
	background-color: #FFF;
	border-radius: 100%;
	vertical-align: middle;
	box-sizing: border-box;
}
#anchor .button a .icon:before {
	content: "";
	position: absolute;
	top: 28%;
	left: 25%;
	width: 50%;
	height: 50%;
	background: url(../img/btn_icon_arrow.png) center no-repeat;
	background-size: contain;
}

#details {
	background-color: #FFF;
	color: #000000;
	border-bottom: solid 1px #cccccc;
}
#details .sec-inner { width: 100%; }
#details .accordion { height: 0; overflow: hidden; }

#details .head {
	display: inline-block;
	width: 100%;
	color: #FFF;
	background-color: #0094d5;
	text-align: center;
	vertical-align: middle;
	padding: 30px 0;
	box-sizing: border-box;
}
#details .head img {
	width: 114px;
}

#details .wrap {
	width: 828px;
	margin: 0 auto;
	padding: 78px 0;
}
#details .button { width: 100%; }
#details .button a {
	display: inline-block;
	width: 100%;
	height: 80px;
	color: #FFF;
	background-color: #0094d5;
	text-align: center;
	vertical-align: middle;
	padding: 24px 0;
	box-sizing: border-box;
}
#details .button a .txt {
	display: inline-block;
	width: 234px;
}
#details .button a .icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: #FFF;
	border-radius: 100%;
	vertical-align: middle;
	margin-left: 10px;
	position: relative;
}
#details .button a .icon:before,
#details .button a .icon:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #0094d5;
	-webkit-transition: all .3s ease;
    transition: all .3s ease;
}
#details .button a .icon:before {
    top: 50%;
    left: 50%;
    width: 6.25%;
    height: 43.75%;
    margin:-21.87% 0 0 -3.17%;
}
#details .button a .icon:after {
    top: 50%;
    left: 50%;
    width: 43.75%;
    height: 6.25%;
    margin:-3.17% 0 0 -21.87%;
}

#details .button a.active .icon:before {
	-webkit-transform: rotate(450deg);
    transform: rotate(450deg);
}
#details .button a.active .icon:after {
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#details .ttl {
	font-size: 24px;
	color: #ec008c;
	font-weight: bold;
	margin: 40px 0 5px;
}
#details .ttl:nth-of-type(1){
	margin: 0 0 5px;
}
#details .ttl b {
	line-height: 1.4em;
}
#details .ttl small {
	font-size: 16px;
	line-height: 1.2em;
	display: block;
}
#details .ttl a {
	color: #ec008c;
	text-decoration: underline;
}
#details p {
	font-size: 14px;
}
#details p.bold {
	font-size: 16px;
	font-weight: bold;
}
#details p + p {
	margin-top: 25px;
}
#details p span {
	display: inline-block;
	text-indent: -1em;
	padding-left: 1em;
}
#details .st { font-weight: normal; }
#details .st:before{ content: "<"; }
#details .st:after { content: ">"; }
#details .mt20 { margin-top: 20px; }
#details .cl-red { color: #ec008c;}
#details .note { margin-top: 15px; font-size: 10px; }
#details .note span {
	display: inline-block;
	text-indent: -1em;
	padding-left: 1em;
}
#details figure { margin: 30px 0; }
#details figure figcaption { padding: 15px 0 0; font-size: 10px; }
#details figure figcaption span {
	display: inline-block;
	text-indent: -1em;
	padding-left: 1em;
}
#details .img1 img { width: 720px; }
#details .img2 img { width: 800px; }
#details .img3 img { width: 800px; }
#details a {
	color: #0094d5;
	text-decoration: underline;
}
#details .link {
	letter-spacing: -.4em;
	text-align: center;
	padding-bottom: 30px;
}
#details .link.pt {
	padding-top: 30px;
	padding-bottom: 0;
}
#details .link a {
	padding: 30px 0;
	width: 402px;
	font-size: 18px;
	line-height: 1em;
}
#details .link a + a { margin-left: 20px; }
#details .link a.button {
	letter-spacing: normal;
	display: inline-block;
	background-color: #0094d5;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	border-radius: 50px;
}
#details .link a.button > span {
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	font-size: inherit;
	vertical-align: middle;
} 
#details .link a.button .icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	display: inline-block;
	margin-left: 0.5em;
	height: 1em;
}
#details .link a.button .other {
	width: 1em;
	background:url(../img/btn_icon_other.png) center no-repeat;
	background-size: contain;
}
#details .link a.button .arrow {
	vertical-align: text-bottom;
}
#details .backtop {
	position: absolute;
	bottom: 50px;
	right: 50px;
	width: 64px;
	height: 0;
	padding-top: 64px;
	z-index: 10;
}
#details .backtop .backtop-inner {
	position: fixed;
	width: 64px;
	height: 0;
	padding-top: 64px;
	bottom: 50px;
	right: 50px;
	opacity: 0;
}
#details .backtop a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/btn_back_top.png) center no-repeat;
	background-size: contain;
}
#details .backtop.stop .backtop-inner {
	position: absolute;
	bottom: 0;
	right: 0;
}


#charm .title {
	position: relative;
}
#charm .title .illust {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
#charm .title .illust > span {
	display: inline-block;
	position: absolute;
}
#charm .title .illust .txt {
	top: 40px;
	left: -100px;
	width: 243px;
	z-index: 2;
}
#charm .title .illust .chara {
	bottom: 0;
	left: 60px;
	width: 276px;
	z-index: 1;
}
#charm .title .illust .award {
	top: 34px;
	right: 0;
	width: 225px;
	text-align: center;
}
#charm .title .illust .award > img {
	width: 125px;
}
#charm .title .illust .award .note {
	display: inline-block;
	text-align: left;
	color: #FFF;
	font-size: 10px;
	text-indent: -0.5em;
	padding-left: 0.5em;
	margin-top: 10px;
}
#charm h2 {
	position: relative;
	width: 1021px;
	margin: 0 auto;
	z-index: 1;
	padding: 66px 0 33px;
	margin-left: -19px;
}

#charm .point {
	position: relative;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	box-sizing: border-box;
	padding: 70px 80px 90px;
	color: #FFF;
	z-index: 2;
}
#charm .point + .point {
	margin-top: 50px;
}
#charm .point h3 { margin: 0 auto; }
#charm .point .question {
	position: relative;
	margin: 50px 0;
	width: 100%;
	height: 256px;
}
#charm .point .question > div {
	position: absolute;
	top: 0;
	left: 0;
}
#charm .point .question .questioner { width: 109px; top: -20px; }
#charm .point .question .balloon { width: 519px; left: 153px; }
#charm .point .question .balloon > p { }
#charm .point .question .balloon .b1 { width: 546px; margin-left: -26px; }
#charm .point .question .balloon .b2 { width: 556px; margin-top: 25px; }
#charm .point .question .respondent { position: absolute; left: auto; right: 0; width: 118px; height: 100%; }
#charm .point .question .respondent > div {
	position: absolute;
	right: 0;
}
#charm .point .question .respondent .txt { top: 0; }
#charm .point .question .respondent .chara { bottom: 0; }
#charm .point .note span {
	display: block;
	text-indent: -1.5em;
	padding-left: 1.5em;
}
#charm .point .detail {
	position: relative;
	padding: 3px 0;
	box-sizing: border-box;
}
#charm .point .detail:before,
#charm .point .detail:after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-image: url(../img/charm_point_detail_line_1.gif);
	background-repeat: repeat-x;
	background-size: contain;
	z-index: 2;
}
#charm .point .detail:before {
	top: 0;
}
#charm .point .detail:after {
	bottom: 0;
}
#charm .point .link {
	letter-spacing: -.4em;
	text-align: center;
	padding-top: 40px;
}
#charm .point .link a {
	padding: 30px 0;
	width: 402px;
	font-size: 18px;
	line-height: 1em;
}
#charm .point .link a + a { margin-left: 20px; }
#charm .point a.button {
	letter-spacing: normal;
	display: inline-block;
	background-color: #0094d5;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	border-radius: 50px;
}
#charm .point a.button > span {
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	font-size: inherit;
	vertical-align: middle;
} 
#charm .point a.button .icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1em;
	display: inline-block;
	margin-left: 0.5em;
	height: 1em;
}
#charm .point a.button .other {
	width: 1em;
	background:url(../img/btn_icon_other.png) center no-repeat;
	background-size: contain;
}
#charm .point a.button .arrow {
	vertical-align: text-bottom;
}

#charm .point.p1 {
	width: 100%;
	height: 1477px;
	background-image: url(../img/charm_point_bg_1.png);
}
#charm .point.p1 h3 { width: 170px; }
#charm .point.p1 .question .respondent .txt {
	top: -115px;
	right: -55px;
	width: 147.5px;
}
#charm .point.p1 .question .respondent .chara { top: -50px; right: -50px; width: 181px; }
#charm .point.p1 .txt1 { width: 856px; }
#charm .point.p1 .note.onlyPc { display: block; }
#charm .point.p1 .note.onlySp { display: none; }
#charm .point.p1 .note { padding-top: 30px; font-size: 10px; }
#charm .point.p1 .movie { text-align: center; padding: 35px 0 40px; }
#charm .point.p1 .movie a { display: inline-block; position: relative; }
#charm .point.p1 .movie a .icon {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	width:19.15%;
	padding-top:19.15%;
	margin: -9.57% 0 0 -9.57%;
	background: url(../img/charm_point_1_movie_icon.png) center no-repeat;
	background-size: contain; 
}
#charm .point.p1 .d1 {
	margin-top: 80px;
}
#charm .point.p1 .d1 .itemwrap { display: table; width: 100%; }
#charm .point.p1 .d1 .itemwrap .item {
	display: table-cell;
	vertical-align: top;
	width: 50%;
	height: 285px;
	text-align: center;
	padding-top: 25px;
	box-sizing: border-box;
}
#charm .point.p1 .d1 .itemwrap .item figure { display: inline-block; margin-bottom: 15px; }
#charm .point.p1 .d1 .itemwrap .item.i1 figure { width: 335px; }
#charm .point.p1 .d1 .itemwrap .item.i2 { position: relative; }
#charm .point.p1 .d1 .itemwrap .item.i2:before {
	content: "";
	position: absolute;
	top: 0;
	left: -1px;
	width: 3px;
	height: 100%;
	background-image: url(../img/charm_point_detail_line_2.gif);
	background-repeat: repeat-y;
	background-size: contain;
}
#charm .point.p1 .d1 .itemwrap .item.i2 figure { width: 248px; }
#charm .point.p1 .d1 .itemwrap .item .txt { font-size: 14px; }
#charm .point.p1 .d1 .itemwrap .item .note { padding-top: 0.5em; }
#charm .point.p1 .d1 .itemwrap .item .note span {
	text-indent: -0.5em;
	padding-left: 0.5em;
	display: inline-block;
}
#charm .point.p1 .d1 .itemwrap .item.i1 p {
	width: 310px;
	margin: 0 auto;
	text-align: left;
	padding: 0;
}

#charm .point.p1 .d1 .itemwrap .img {
    position: absolute;
    bottom: 1px;
    right: 0px;
    width: 86px;
    height: 119px;
}
#charm .point.p1 .d1 .itemwrap .chara {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#charm .point.p2 {
	width: 100%;
	height: 1488px;
	background-image: url(../img/charm_point_bg_2.png);
}
#charm .point.p2 h3 { width: 185px; }
#charm .point.p2 .question { height: 275px; }
#charm .point.p2 .question .respondent .txt { top: -79px; right: -41px; width:157px; }
#charm .point.p2 .question .respondent .chara { top: -4px; right: -20px; width: 195px; }

#charm .point.p2 .d1 .itemwrap {
	letter-spacing: -.4em;
	width: 838px;
	margin-left: -5px;
	padding: 30px 0 0;
}
#charm .point.p2 .d1 .itemwrap .item {
	letter-spacing:normal;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}
#charm .point.p2 .d1 .itemwrap .item + .item { margin-left: 10px; }
#charm .point.p2 .d1 .itemwrap .item { width: 414px; }
#charm .point.p2 .d1 .itemwrap .item .ttl { width:114px; margin: 0 auto 20px; }
#charm .point.p2 .d1 .itemwrap .item ul {
	list-style: none;
	letter-spacing: -.4em;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	padding: 27px 0;
}
#charm .point.p2 .d1 .itemwrap .item.i1 ul{ background-image: url(../img/charm_point_2_list_bg_1.png); }
#charm .point.p2 .d1 .itemwrap .item.i2 ul{ background-image: url(../img/charm_point_2_list_bg_2.png); }
#charm .point.p2 .d1 .itemwrap .item ul li {
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 182px;
	height: 282px;
	position: relative;
}
#charm .point.p2 .d1 .itemwrap .item ul li figure { width: 172px; margin: 0 auto; padding-top:0;  }
#charm .point.p2 .d1 .itemwrap .item ul li + li { margin-left: 10px; }
#charm .point.p2 .d1 .itemwrap .item ul li p {
	color:#000;
	font-size: 14px;
}
#charm .point.p2 .d1 .itemwrap .item ul li .name {
	position: absolute;
	bottom: 64px;
	left: 0;
	width: 100%;
	color:#000;
	font-size: 14px;
	font-weight: bold;
}
#charm .point.p2 .d1 .itemwrap .item ul li .note {
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	font-size: 14px;
	white-space: nowrap;
	text-align: center;
	color: #e4007f;
	font-weight: bold;
}
#charm .point.p2 .d1 .itemwrap .item ul li a {
	position: absolute;
	bottom: 0;
	left: 0;
	display: inline-block;
	padding: 10px 0;
	width: 100%;
	font-size: 12px;
	line-height: 1em;
}
#charm .point.p2 .bottom {
	position: relative;
    margin: 25px 0 20px;
    width: 100%;
    height: 142px;
}
#charm .point.p2 .bottom .questioner {
	position: absolute;
	top: 0;
	left: 0;
	width: 109px;
}
#charm .point.p2 .bottom .balloon {
	position: absolute;
	top: 0;
	width: 519px;
    left: 153px;
}
#charm .point.p2 .bottom .balloon p {
	position: absolute;
	top: 0;
	left: 0;
	width: 519px;
    margin-left: -25px;
}

#charm .point.p2 .link a {
	padding: 20px 0;
	width: 442px;
	position: relative;
	font-size: 16px;
}
#charm .point.p2 .link a .img {
	position: absolute;
	bottom: 0;
	left: 55px;
	width: 76.5px;
	height: 120%;
    overflow: hidden;
}
#charm .point.p2 .link a .img .chara {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#charm .point.p2 .link + .link {
	position: relative;
	margin-top: 40px;
}
#charm .point.p2 .link + .link:before {
    content: "";
    position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: url(../img/charm_point_detail_line_1.gif);
    background-repeat: repeat-x;
    background-size: contain;
    z-index: 2;
}
#charm .point.p2 .link + .link a {
	padding: 30px 0;
    width: 402px;
    font-size: 18px;
    line-height: 1em;
	display: inline-block;
}
#charm .point.p2 .link + .link a + a {
    margin-left: 20px;
}

#charm .point.p3 {
	width: 100%;
	height: 1846px;
	background-image: url(../img/charm_point_bg_3.png);
}
#charm .point.p3 h3 { width: 185px; }
#charm .point.p3 .question { height: 275px; }
#charm .point.p3 .question .respondent .txt { top: -54px; right: -49px; width:142.8571%; }
#charm .point.p3 .question .respondent .chara { top: 34px; right: -15px; width: 183.5px; }
#charm .point.p3 .d1 { text-align: center; padding: 35px 0 42px; }
#charm .point.p3 .d1 figure { width: 599px; margin: 0 auto; }
#charm .point.p3 .d1 .note {
	margin-top: 20px;
	font-size: 10px;
}
#charm .point.p3 .d1 a {
	margin-top: 20px;
	 width: 162px;
	 font-size: 12px;
	 padding: 15px 0;
	 line-height: 1em;
}
#charm .point.p3 .d2 { padding: 50px 0 0; }
#charm .point.p3 .d2 figure { position:relative; }
#charm .point.p3 .d2 figure .note {
	position:absolute;
	top: 0;
	left: 0;
	color: #666666;
	font-size: 10px;
}
#charm .point.p3 .d2 figure .note span {
	display: inline-block;
	text-indent: -0.5em;
	padding-left: 0.5em;
	font-size: 10px;
}
#charm .point.p3 .d2 figure .note.n1 {
	top: 134px;
	left: 451px;
}
#charm .point.p3 .d2 figure .note.n2 {
	width: 738px;
	top: 527px;
	left: 47px;
}
#charm .point.p3 .link { position: relative; }
#charm .point.p3 .link a { position: relative; z-index: 2; }
#charm .point.p3 .link .chara {
    position: absolute;
    top: -54px;
    left: 47px;
    width: 87.5px;
	z-index: 1;
}

#charm .point.p4 {
	width: 100%;
	height: 1593px;
	background-image: url(../img/charm_point_bg_4.png);
}
#charm .point.p4 h3 { width: 185px; }
#charm .point.p4 .question { height: 275px; }
#charm .point.p4 .question .respondent .txt { top: -86px; right: -44px; width: 168.5px; }
#charm .point.p4 .question .respondent .chara { bottom: -50px; right: -26px; width: 176px; }
#charm .point.p4 .d1 { text-align: center; padding: 18px 0 53px; }
#charm .point.p4 .d1 figure { width: 695px; margin: 0 auto; }
#charm .point.p4 .d1 .txt {
	font-size: 14px;
	margin-top: 25px;
	font-weight: bold;
}
#charm .point.p4 .d1 .note {
	font-size: 10px;
	margin-top: 1em;
}
#charm .point.p4 .d1 .note span {
	text-indent: -0.5em;
	padding-left: 0.5em;
}
#charm .point.p4 .d1 a {
	margin-top: 20px;
	 width: 162px;
	 font-size: 12px;
	 padding: 15px 0;
}
#charm .point.p4 .d1 .img {
    position: absolute;
    bottom: 0px;
    left: 56px;
    width: 88px;
	z-index: 3;
}
#charm .point.p4 .d2 { text-align: center; padding: 40px 0 0; }
#charm .point.p4 .d2 p { width: 366px; margin: 0 auto; }
#charm .point.p4 .d2 ul {
	letter-spacing: -.4em;
	margin-top: 25px;
}
#charm .point.p4 .d2 ul li {
	width: 327px;
	height: 359px;
	display: inline-block;
	letter-spacing: normal;
	background: url(../img/charm_point_4_mimamori_list_bg.png) top center no-repeat;
	background-size: contain;
	text-align: center;
	vertical-align: top;
	box-sizing: border-box;
	position: relative;
	color: #666666;
}
#charm .point.p4 .d2 ul li + li {
	margin-left: 22px;
}
#charm .point.p4 .d2 ul li .logo {
	width: 134px;
	padding-top: 42px;
	margin: 0 auto;
}
#charm .point.p4 .d2 ul li p {
	margin: 0 auto;
	width: 100%;
}
#charm .point.p4 .d2 ul li .ttl {
	padding-top: 20px;
	font-size: 18px;
	font-weight: bold;
}
#charm .point.p4 .d2 ul li .txt {
	padding-top: 1em;
	font-size: 12px;
}
#charm .point.p4 .d2 ul li .note {
	font-size: 10px;
}
#charm .point.p4 .d2 ul li .note span {
	display: inline-block;
	text-indent: -0.5em;
	padding-left: 0.5em;
}
#charm .point.p4 .d2 ul li a {
	position: absolute;
	bottom: 32px;
	left: 50%;
	width: 162px;
	padding: 15px 0;
	margin-left: -81px;
	line-height: 1em;
}

#banner { background-color: #FFF; }
#banner .sec-inner { padding: 100px 0 60px; }
#banner a { display: inline-block; }
#banner a + a { margin-top: 30px; }
#banner .note { margin-top: 70px; text-align: right; }


@media (min-width: 769px){
    br.onlySp { display: none; }
	
	#mainvisual .link-btn a.button:hover:before {
		opacity: 1;
	}
	#mainvisual .link-btn a.button:before {
		content: "";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50px;
		background-color: rgba(255,255,255,0.50);
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}
	
	#charm .point.p1 .movie a:before {
		content: "";
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.50);
		z-index: 1;
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}
	#charm .point.p1 .movie a .icon {
		z-index: 2;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
	#charm .point.p1 .movie a:hover .icon {
		-webkit-transform: scale(1.1,1.1);
    	transform: scale(1.1,1.1);
	}
	#charm .point.p1 .movie a:hover:before  {
		opacity: 1;
	}
	
	#details .link a,
	#charm .point a.button {
		position: relative;
	}
	#mainvisual .link a:before,
	#details .link a:before,
	#charm .point a.button:before {
		content: "";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50px;
		background-color: rgba(255,255,255,0.50);
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}
	
	#mainvisual .link a:hover:before,
	#details .link a:hover:before,
	#charm .point a.button:hover:before {
		opacity: 1;
	}
	
	#banner a {
		position: relative;
	}
	#banner a:before {
		content: "";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.50);
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}
	#banner a:hover:before {
		opacity: 1;
	}
	main .backtop:before {
		content: "";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background-color: rgba(255,255,255,0.50);
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}
	main .backtop:hover:before {
		opacity: 1;
	}
	#anchor .button a:before {
		content: "";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.50);
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
		z-index: 3;
	}
	#anchor .button a:hover:before {
		opacity: 1;
	}
	
	#details .backtop a:before {
		content: "";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.50);
		opacity: 0;
		border-radius: 100%;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
		transition: opacity 0.3s;
		z-index: 3;
	}
	#details .backtop a:hover:before {
		opacity: 1;
	}
	
}
@media (max-width: 768px){
    br.onlyPc { display: none; }

    html,body,
    header .glnav-fixed { min-width: 0; }
	
	#modal .item .item_inner .btn.close {
		right: 0;
	}
	
	main .section .sec-inner {
		width: 100%;
	}
	
	main .bg {
		padding: 0 0 7.06%;
		background: url(../img/sp/bg.jpg) center no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
	
	#mainvisual { height: auto; }
	#mainvisual .sec-inner { height: auto; }
	#mainvisual .sec-inner:before {
		content: "";
		display: inline-block;
		padding-top: 171.2%;
	}
	#mainvisual h1 {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		width: 100%;
		margin-left:0;
	}
	#mainvisual .illust {
		position: absolute;
		width:85.6%;
		-webkit-transform: translate(-50%,0);
		transform: translate(-50%,0);
	}
	#mainvisual .illust img { width: 100%; }
	#mainvisual .illust.i1 { left: 50%; bottom: 52.8%; }
	#mainvisual .illust.i2 { left: 50%; bottom: 24.29%; }
	#mainvisual .note {
		bottom:12.02%;
		font-size:0.5rem; font-size:2.5vw;
		padding: 0 9.33%;
		box-sizing: border-box;
		width:100%;
	}
	#mainvisual .note small {
		font-size:0.5rem; font-size:2.5vw;
		text-align: left;
		display: inline-block;
	}
	#mainvisual .note small span {
		text-indent: -1.5em;
		padding-left: 1.5em;
		display: inline-block;
	}
	#mainvisual .link {
		left: 0;
		bottom: 2%;
	}
	#mainvisual .link a {
		padding: 4.75% 0;
		width:82.66%;
		font-size: 0.93rem;
		font-size: 4vw;
		line-height: 1em;
	}
	
	#details .head {
		padding: 5.3333% 0;
	}
	#details .head img {
		width:22.6666%;
	}
	#details .wrap {
		width: 100%;
		margin: 0 auto;
		padding: 8.13% 6% 15.1515%; /*660*/
		box-sizing: border-box;
	}
	#details .ttl {
		font-size:0.93rem; font-size:4vw;
		margin: 5.75% 0 2.57%;
	}
	#details .ttl b {
		font-size:0.93rem; font-size:4vw;
	}
	#details .ttl small {
		font-size:0.68rem; font-size:2.93vw;
		line-height: 1.4em;
		padding-top: 0.8em;
	}
	#details .ttl:nth-of-type(1){ margin: 0 0 2.57%; }
	#details p { font-size:0.75rem; font-size:3.2vw; }
	#details p.bold { font-size:0.75rem; font-size:3.2vw; }
	#details p + p { margin-top: 6.51%; }
	#details .st { font-size:0.75rem; font-size:3.2vw; }
	#details .mt20 { margin-top: 5.15%; }
	#details .note { margin-top: 15px; font-size: 10px; }
	#details .note span {
		display: inline-block;
		text-indent: -1em;
		padding-left: 1em;
	}
	#details figure { margin: 2.42% 0; }
	#details figure figcaption { padding: 2.42% 0 0; font-size: 10px; line-height: 1.5em; }
	#details figure figcaption span {
		display: inline-block;
		text-indent: -1em;
		padding-left: 1em;
	}
	#details .img1 img { width: 100%; }
	#details .img2 img { width: 100%; }
	#details .img3 img { width: 100%; }
	
	#details .button a { height: auto; padding: 3.73% 0; }
	#details .button a .txt { width:47.33%; }
	#details .button a .icon {
		width: 6.4%;
		height: auto;
		padding-top: 6.4%;
		margin-left: 3.2%;
	}
	
	#details .button a { height: auto; padding: 3.73% 0; }
	
	#details .link {
		letter-spacing:normal;
		padding: 6.3636% 0;
	}
	#details .link a {
		padding: 5.45% 0;
		width: 93.93%; /*620*/
		font-size: 0.93rem;
		font-size: 4vw;
		line-height: 1em;
	}
	#details .link a + a { margin-top: 4.83%; margin-left: 0; }
	
	#details .backtop {
		bottom: 0;
    	right: 5.3333%;
		padding-top: 64px;
		width:64px;
		margin-bottom: -7%;
		z-index: 2;
	}
	#details .backtop .backtop-inner {
		right: 5.3333%;
	}
	
	#anchor .button a {
		padding: 4.9% 0;
		height: auto;
	}
	#anchor .button a .txt {
		width:46.8%;
	}
	#anchor .button a .icon {
		top: 50%;
	    width: 9%;
		height: auto;
		right: -13%;
		padding: 9% 0 0;
		margin: -4.5% 0 0;
		line-height: 0;
	}
	
	#charm .title .illust .txt {
		top: 25.26%;
		left: 0.2666%;
		width:27.4666%;
	}
	#charm .title .illust .chara {
		top:6.57%;
		bottom: auto;
		left: 16.9333%;
		width:41.4666%;
	}
	#charm .title .illust .award {
		top: 11.57%;
		right: 3.86%;
		width:25.6%;/*192*/
	}
	#charm .title .illust .award > img {
		width:92.18%;
	}
	#charm .title .illust .award .note {
		font-size:0.5rem; font-size:2.13vw;
		margin-top: 0.5em;
		line-height: 1.25em;
	}
	#charm h2 {
		width:96.93%;
		padding: 30.26% 0 5.06%;
		margin: 0 auto;
	}
	#charm .point {
		padding: 0;
		height: auto;
		background-size: auto 100%;
	}
	#charm .point + .point {
		margin-top: 5.33%;
	}
	#charm .point:before {
		content: "";
		display: inline-block;
	}
	#charm .point .point-inner {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 7.2% 6% 0; /*660*/
		box-sizing: border-box;
	}
	#charm .point .question {
		height: auto;
	}
	#charm .point .question {
		position: relative;
		margin: 6.93% 0 18.93%;
		width: 100%;
		height: auto;
	}
	#charm .point .question:before {
		content: "";
		display: inline-block;
		padding-top: 31.27%;
	}
	#charm .point .question .questioner { width:16.76%; top: 0; left: -2%; margin-top: -3.47%; z-index:2; }
	#charm .point .question .balloon { width:63.44%; left: 17.97%; } /*420*/
	#charm .point .question .balloon .b1 { width:106.66%; margin-left: -6.42%; }
	#charm .point .question .balloon .b2 { width:108.33%; margin-top: 7.85%; }
	#charm .point .question .respondent { position: absolute; left: auto; right: 0; width:16.91%; height: 100%; } /*112*/
	
	#charm .point .link {
		letter-spacing:normal;
		padding-top: 12.27%;
	}
	#charm .point .link a {
		padding: 5.45% 0;
		width: 93.93%; /*620*/
		font-size: 0.93rem;
		font-size: 4vw;
		line-height: 1em;
	}
	#charm .point .link a + a { margin-top: 4.83%; margin-left: 0; }
	
	
	#charm .point.p1 { height: auto; background-image: url(../img/sp/charm_point_bg_1.png); }
	#charm .point.p1:before { padding-top: 320.6666%; }
	#charm .point.p1 h3 { width:22.8%; }
	#charm .point.p1 .question .respondent .txt {
		top:0;
		margin-top: -98.21%;
		right: -39.28%;
		width:158.0357%;
	}
	#charm .point.p1 .question .respondent .chara { top: 0; right: -4.46%; margin-top: -16.96%; width:123.2142%; }
	#charm .point.p1 .txt1 { width:100%; margin: 0 auto; }
	#charm .point.p1 .fbox {
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	#charm .point.p1 .fbox .note {
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
	}
	#charm .point.p1 .fbox .movie {
		-webkit-box-ordinal-group:0;
		-ms-flex-order:0;
		-webkit-order:0;
		order:0;
	}
	#charm .point.p1 .note.onlyPc { display: none; }
	#charm .point.p1 .note.onlySp { display: block; }
	#charm .point.p1 .note { padding-top: 0; font-size:0.43rem; font-size:1.86vw; padding-top: 8.48%; }
	#charm .point.p1 .note span { font-size:0.5rem; font-size:2.13vw; }
	#charm .point.p1 .movie { width:88.51%; margin: 0 auto; padding: 7.55% 0 7.55%; }
	#charm .point.p1 .d1 { margin: 8.48% 0 0; }
	#charm .point.p1 .d1 .itemwrap { display: block; }
	#charm .point.p1 .d1 .itemwrap .item {
		display: block;
		width: 100%;
		height: auto;
		padding: 6.06% 0 3.06%;
	}
	#charm .point.p1 .d1 .itemwrap .item figure {
		margin-bottom: 0;
	}
	#charm .point.p1 .d1 .itemwrap .item .txt {
		margin-top: 1em;
		font-size:0.61rem; font-size:2.61vw;
		line-height: 1.7em;
		font-weight: bold;
	}
	#charm .point.p1 .d1 .itemwrap .item.i1 p {
		width:72.87%;
		margin: 1em auto 0;
	}
	#charm .point.p1 .d1 .itemwrap .item .note {
		font-size:0.5rem; font-size:2.13vw;
		padding: 0;
	}
	#charm .point.p1 .d1 .itemwrap .item.i1 .note {
		padding-top: 0.5em;
	}
	#charm .point.p1 .d1 .itemwrap .item.i2 .note {
		padding-top: 1em;
	}
	#charm .point.p1 .d1 .itemwrap .item.i1 figure { width:69.0909%; } /*660*/
	#charm .point.p1 .d1 .itemwrap .item.i2 { position: relative; }
	#charm .point.p1 .d1 .itemwrap .item.i2:before { 
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 3px;
		background-image: url(../img/charm_point_detail_line_1.gif);
		background-repeat: repeat-x;
		background-size: auto 100%;
	}
	#charm .point.p1 .d1 .itemwrap .item.i2 figure { width:52.87%; } /*660*/
	
	#charm .point.p1 .d1 .itemwrap .img {
		position: absolute;
		bottom: 0;
		right: 0;
		width:21.6666%;
		height: auto;
		line-height: 0;
	}
	#charm .point.p1 .d1 .itemwrap .img:before {
		content: "";
		display: inline-block;
		padding-top: 139.7%;
	}
	
	#charm .point.p1 .d1 .chara {
		position: absolute;
		bottom: 0;
		right: 0;
		width:23.63%;
	}
	#charm .point.p1 .link {
		padding-top: 12.07%;
		width: 100%;
	}
	
	
	
	#charm .point.p2 { height: auto; background-image: url(../img/sp/charm_point_bg_2.png); }
	#charm .point.p2:before { padding-top: 353.46%; }
	#charm .point.p2 h3 { width:27.72%; }
	#charm .point.p2 .question { height: auto; margin: 6.93% 0 9.63%; }
	#charm .point.p2 .question:before { padding-top: 43.17%; }
	#charm .point.p2 .question .respondent .txt {
		top:0;
		margin-top: -11.6%;
		right: -40.17%;
		width:158.03%;/*112*/
	} 
	#charm .point.p2 .question .respondent .chara {
		top: 0;
		right: -22.17%;
		margin-top: 73.1%;
		width:141.0714%;
	}
	#charm .point.p2 .txt1 { width:101.81%; margin: 0 auto; }
	#charm .point.p2 .d1 .itemwrap {
		letter-spacing: -.4em;
		width: 100%;
		margin-left: 0;
		padding: 7.87% 0 8.27%;
		text-align: center;
	}
	#charm .point.p2 .d1 .itemwrap .item {
		letter-spacing:normal;
		display: inline-block;
		text-align: center;
		vertical-align: top;
	}
	#charm .point.p2 .d1 .itemwrap .item + .item { margin-left: 0; margin-top: 9.69%; }
	#charm .point.p2 .d1 .itemwrap .item.i1 { width:94.54%; }
	#charm .point.p2 .d1 .itemwrap .item.i2 { width:94.54%; }
	#charm .point.p2 .d1 .itemwrap .item .ttl { width:27.72%; margin: 0 auto 4.09%; }
	#charm .point.p2 .d1 .itemwrap .item ul {
		list-style: none;
		letter-spacing: -.4em;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 0 7.15%;
		text-align: center;
	}
	#charm .point.p2 .d1 .itemwrap .item.i1 ul{ background-image: url(../img/sp/charm_point_2_list_bg_1.png); }
	#charm .point.p2 .d1 .itemwrap .item.i2 ul{ background-image: url(../img/sp/charm_point_2_list_bg_2.png); }
	#charm .point.p2 .d1 .itemwrap .item ul li {
		display: inline-block;
		letter-spacing: normal;
		width:41.66%;
		height: auto;
	}
	#charm .point.p2 .d1 .itemwrap .item ul li:before {
		content: "";
		display: inline-block;
		padding-top: 173%;
	}
	#charm .point.p2 .d1 .itemwrap .item ul li .list_inner {
		position:absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#charm .point.p2 .d1 .itemwrap .item ul li figure {
		width:94.39%;
		margin: 0 auto;
	    padding-top: 22%;
	}
	#charm .point.p2 .d1 .itemwrap .item ul li + li { margin-left: 5.6%; }
	#charm .point.p2 .d1 .itemwrap .item ul li p {
		font-size:0.65rem; font-size:2.8vw;
	}
	#charm .point.p2 .d1 .itemwrap .item ul li a {
		padding: 10.06% 0;
		font-size:0.62rem; font-size:2.66vw;
	}
	#charm .point.p2 .d1 .itemwrap .item ul li .name {
		bottom: 24%;
		padding: 0;
		font-size: 0.65rem;
    	font-size: 2.8vw;
	}
	#charm .point.p2 .d1 .itemwrap .item ul li .note {
		bottom: 18%;
		font-size:0.65rem; font-size:2.8vw;
	}
	#charm .point.p2 .bottom {
		width: 100%;
		height: auto;
		margin: 0;
	}
	#charm .point.p2 .bottom:before {
		content: "";
		display: inline-block;
		padding-top: 27.17%;
	}
	#charm .point.p2 .bottom .questioner {
		width: 16.76%;
		top: 0;
		left: -2%;
		z-index: 2;
	}
	#charm .point.p2 .bottom .balloon {
		width: 63.44%;
		left: 17.97%;
	}
	#charm .point.p2 .bottom .balloon p {
		width: 106.66%;
		margin-left: -6.42%;
	}
	#charm .point.p2 .link {
		padding-top: 9.27%;
	}
	#charm .point.p2 .link a {
		padding: 5.28% 0;
		width:94.54%;
		font-size:0.93rem; font-size:4vw;
	}
	#charm .point.p2 .link a .txt { margin-left: 10%; }
	#charm .point.p2 .link a .img {
		position: absolute;
		bottom: 0;
		left: 5.28%;
		width: 18.9406%;
		height: 115%;
	}
	#charm .point.p2 .link + .link {
		margin-top: 8.07%;
	}
	#charm .point.p2 .link + .link a {
		padding: 5.28% 0;
		width:94.54%;
		font-size: 0.93rem;
		font-size: 4vw;
	}
	#charm .point.p2 .link + .link a + a {
		margin-left: 0;
	}

	
	
	#charm .point.p3 { height: auto; background-image: url(../img/sp/charm_point_bg_3.png); }
	#charm .point.p3:before { padding-top: 362%; }
	#charm .point.p3 h3 { width:28.03%; }
	#charm .point.p3 .question { height: auto; margin: 6.93% 0 7.42%; }
	#charm .point.p3 .question:before { padding-top: 49.67%; }
	#charm .point.p3 .question .respondent .txt {
		top:0;
		margin-top: 63.57%;
		right: -40.17%;
		width:142.8571%;/*112*/
	} 
	#charm .point.p3 .question .respondent .chara {
		top: 0;
		right: -12.46%;
		margin-top: 144.49%;
		width:128.5714%;
	}
	#charm .point.p3 .d1 { padding: 9.09% 0; }
	#charm .point.p3 .d1 figure { width:97.57%; }
	#charm .point.p3 .d1 .note {
		margin-top: 5.6%;
		font-size:0.5rem; font-size:2.13vw;
	}
	#charm .point.p3 .d1 .note span {
		line-height: 1.25em;
	}
	#charm .point.p3 .d1 a {
		margin-top: 5.75%;
		width:42.72%;
		font-size:0.62rem; font-size:2.66vw;
		padding: 3.99% 0;/*282*/
	}
	#charm .point.p3 .d2 { padding: 10.75% 0 0; }
	#charm .point.p3 .d2 figure .note span {
		font-size:0.5rem; font-size:2.13vw;
	}
	#charm .point.p3 .d2 figure .note.n1 {
		width:50%;
		top: 87.62%;
		left: 12.72%;
	}
	#charm .point.p3 .d2 figure .note.n2 {
		width:86.44%;
		top: 60.87%;
		left: 6.96%;
	}
	#charm .point.p3 .link .chara {
		position: absolute;
		top: -15.9%;
    	left: 8.0645%;
    	width:20.6451%;
		z-index: 1;
	}
	
	#charm .point.p4 { height: auto; background-image: url(../img/sp/charm_point_bg_4.png); }
	#charm .point.p4:before { padding-top: 402.13%; }
	#charm .point.p4 h3 { width:28.03%; }
	#charm .point.p4 .question { height: auto; margin: 6.93% 0 7.42%; }
	#charm .point.p4 .question:before { padding-top: 43.47%; }
	#charm .point.p4 .question .respondent .txt {
		top:0;
		margin-top: 20.18%;
		right: -40.17%;
		width:150.8928%;/*112*/
	}
	#charm .point.p4 .question .respondent .chara { top: 0; right: -18.28%; margin-top: 77.35%; width:119.6428%; }
	#charm .point.p4 .d1 { padding: 6.06% 0 8.12%; position: relative;}
	#charm .point.p4 .d1 figure { width:83.48%; }
	#charm .point.p4 .d1 .txt {
		font-size:0.75rem; font-size:3.2vw;
		margin-top: 4%;
		line-height: 2em;
	}
	#charm .point.p4 .d1 .note {
		font-size:0.5rem; font-size:2.13vw;
		margin-top: 0.8%;
	}
	#charm .point.p4 .d1 a {
		margin-top: 5.75%;
		width:42.72%;
		font-size:0.62rem; font-size:2.66vw;
		padding: 3.99% 0;/*282*/
		line-height: 1em;
	}
	#charm .point.p4 .d1 .img { bottom: -34%; left: -0.4546%; width:16.8181%;}
	#charm .point.p4 .d2 { padding: 6.06% 0 0; }
	#charm .point.p4 .d2 p { width:74.24%; }
	#charm .point.p4 .d2 ul {
		margin-top: 8.18%;
	}
	#charm .point.p4 .d2 ul li {
		width:81.51%;
		height: auto;
		background: url(../img/sp/charm_point_4_mimamori_list_bg.png) top center no-repeat;
		background-size: contain;
	}
	#charm .point.p4 .d2 ul li:before {
		content: "";
		display: inline-block;
		padding-top: 117.7%;
	}
	#charm .point.p4 .d2 ul li .inner {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#charm .point.p4 .d2 ul li + li { margin-left: 0; margin-top: 7.24%; }
	
	#charm .point.p4 .d2 ul li .logo {
		width:100%; /*536*/
		padding-top: 12.35%;
		margin: 0 auto;
	}
	#charm .point.p4 .d2 ul li .logo img {
		width:51.67%; /*536*/
	}
	#charm .point.p4 .d2 ul li .ttl {
		padding-top: 9.7%;
		font-size:1.12rem; font-size:4.8vw;
	}
	#charm .point.p4 .d2 ul li .txt {
		padding-top: 7.06%;
		font-size:0.75rem; font-size:3.2vw;
	}
	#charm .point.p4 .d2 ul li .note {
		padding-top: 3%;
		font-size:0.5rem; font-size:2.13vw;
	}
	#charm .point.p4 .d2 ul li .note span {
		display: inline-block;
		text-indent: -0.5em;
		padding-left: 0.5em;
	}
	#charm .point.p4 .d2 ul li a {
		position: absolute;
		bottom: 6.69%;
		left: 50%;
		width:52.04%;
		padding: 5.01% 0;
		margin-left: -26.02%;
	}
	.#charm .point.p4 .link {
		padding-top: 9.07%;
	}
	
	#banner .sec-inner { padding: 10.66% 5.06%; box-sizing: border-box; }
	#banner a + a { margin-top: 6.1%; }
	#banner .note { margin-top: 11.9%; text-align: center; font-weight: bold; font-size:0.5rem; font-size:2.13vw; }
	
	
}
@media (max-width: 768px) and (min-width: 768px) {
	#charm .point.p4 .d1 .img { bottom: -36%; left: -4.4546%; width:14%;}

}