@charset "utf-8";

/* ---------------------------------------------------------- */
/* base
/* ---------------------------------------------------------- */
/* total style */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

html {
	width: 100%;
	height: 100%;
	font-size: 62.5%;
	}

body {
	width: 100%;
	min-width: 1200px;
	height: 100%;
	font-size: 1.4rem;
	font-family: 'Noto Serif JP' , 游明朝 , "Yu Mincho" , YuMincho , "Hiragino Mincho ProN" , "Hiragino Mincho Pro" , HGS明朝E , メイリオ , Meiryo , sans-serif;
	color: #323232;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	}

@media (max-width: 768px){
body {
	min-width: 320px;
	overflow-x: hidden;
	}
}

/* normalize 対策 */
h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,ol,figure {
	font-weight: normal;
	margin: 0;
	padding: 0;
	list-style: none;
	}

/* clearfix */
.clearfix:before ,
.clearfix:after  {content:""; display: block; overflow: hidden;}
.clearfix:after  {clear: both;}
.clearfix        {zoom: 1;}

/* img */
img        {line-height: 0; vertical-align: middle; border: 0;}

/* font */
.text10    {font-size: 1.0rem;}
.text12    {font-size: 1.2rem;}
.text14    {font-size: 1.4rem;}
.text16    {font-size: 1.6rem;}
.text18    {font-size: 1.8rem;}
.text20    {font-size: 2.0rem;}
.text24    {font-size: 2.4rem;}

/* style */
.normal    {font-weight: normal;}
.bold      {font-weight: bold;}
.italic    {font-style: italic;}
.strike    {text-decoration: line-through;}
.underline {text-decoration: underline;}

/* color */
.red       {color: #e60014;}
.gold      {color: #c8af46;}
.gray      {color: #b4b4b4;}
.white     {color: #fff;}
.black     {color: #323232;}

/* link */
a {
	color: #e60014;
	word-break: break-all;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}

a:hover {
	color: #c8af46;
	text-decoration: none;
	}

/* selection */
::selection      {color: #323232; background: #c8af46;}
::-moz-selection {color: #323232; background: #c8af46;}

/* br */
br.sp      {display: none;}
@media (max-width: 640px){
	br.pc  {display: none;}
	br.sp  {display: inline-block;}
}

/* indent */
.indent {
	text-indent: -1em;
	padding: 0 0 0 1em;
	display: inline-block;
	}

.indent2 {
	text-indent: -2em;
	padding: 0 0 0 2em;
	display: inline-block;
	}

.indent3 {
	text-indent: -3em;
	padding: 0 0 0 3em;
	display: inline-block;
	}

/* margin */
.mt0      {margin-top: 0;}
.mt5      {margin-top: 5px;}
.mt10     {margin-top: 10px;}
.mt20     {margin-top: 20px;}
.mt30     {margin-top: 30px;}
.mt40     {margin-top: 40px;}
.mt50     {margin-top: 50px;}

.mr0      {margin-right: 0;}
.mr5      {margin-right: 5px;}
.mr10     {margin-right: 10px;}
.mr20     {margin-right: 20px;}
.mr30     {margin-right: 30px;}
.mr40     {margin-right: 40px;}
.mr50     {margin-right: 50px;}

.mb0      {margin-bottom: 0;}
.mb5      {margin-bottom: 5px;}
.mb10     {margin-bottom: 10px;}
.mb20     {margin-bottom: 20px;}
.mb30     {margin-bottom: 30px;}
.mb40     {margin-bottom: 40px;}
.mb50     {margin-bottom: 50px;}

.ml0      {margin-left: 0;}
.ml5      {margin-left: 5px;}
.ml10     {margin-left: 10px;}
.ml20     {margin-left: 20px;}
.ml30     {margin-left: 30px;}
.ml40     {margin-left: 40px;}
.ml50     {margin-left: 50px;}

/* padding */
.pt0      {padding-top: 0;}
.pt5      {padding-top: 5px;}
.pt10     {padding-top: 10px;}
.pt20     {padding-top: 20px;}
.pt30     {padding-top: 30px;}
.pt40     {padding-top: 40px;}
.pt50     {padding-top: 50px;}

.pr0      {padding-right: 0;}
.pr5      {padding-right: 5px;}
.pr10     {padding-right: 10px;}
.pr20     {padding-right: 20px;}
.pr30     {padding-right: 30px;}
.pr40     {padding-right: 40px;}
.pr50     {padding-right: 50px;}

.pb0      {padding-bottom: 0;}
.pb5      {padding-bottom: 5px;}
.pb10     {padding-bottom: 10px;}
.pb20     {padding-bottom: 20px;}
.pb30     {padding-bottom: 30px;}
.pb40     {padding-bottom: 40px;}
.pb50     {padding-bottom: 50px;}

.pl0      {padding-left: 0;}
.pl5      {padding-left: 5px;}
.pl10     {padding-left: 10px;}
.pl20     {padding-left: 20px;}
.pl30     {padding-left: 30px;}
.pl40     {padding-left: 40px;}
.pl50     {padding-left: 50px;}


/* ---------------------------------------------------------- */
/* LAYOUT */
/* ---------------------------------------------------------- */
#wrapper {
	width: 100%;
	background: url(../images/common/bg_menu.png);
	background-size: 75px auto;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	}

.lower {
	opacity: 0;
	}

.lower #wrapper {
	min-height: calc(100% - 64px);
	}

@media all and (-ms-high-contrast: none) {
.lower #wrapper {
	min-height: auto;
	}
}

@media (max-width: 768px){
#wrapper {
	display: block;
	}

.lower #wrapper {
	min-height: auto;
	}
}

@media (max-width: 640px){
#wrapper {
	background-size: 50px auto;
	}
}


/* ---------------------------------------------------------- */
/* MENU */
/* ---------------------------------------------------------- */
#menu {
	width: 230px;
	min-height: 890px;
	background: url(../images/common/bg_frame.png) top right repeat-y;
	background-size: 25px auto;
	text-align: center;
	padding: 35px 25px 35px 0;
	}

#menu h1 {
	margin: 0 0 25px 0;
	}

#menu h1 img {
	width: 165px;
	}

#menu .btn {
	display: none;
	}

#menu nav ul.menu li {
	font-size: 1.8rem;
	font-family: 'Cardo', serif;
	color: #b4b4b4;
	line-height: 1;
	margin: 0 0 20px 0;
	}

#menu nav ul.menu li.top {
	display: none;
	}

#menu nav ul.menu li a {
	color: #323232;
	text-decoration: none;
	}

#menu nav ul.menu li a:hover {
	color: #c8af46;
	}

@media (max-width: 768px){
#menu {
	width: 100%;
	height: 55px;
	min-height: auto;
	background: url(../images/common/bg_line.png) bottom left repeat-x , url(../images/common/bg_menu.png);
	background-size: auto 5px , 50px auto;
	padding: 0;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 100;
	}

#menu h1 {
	width: 76px;
	line-height: 0;
	margin: 6px auto 0 auto;
	}

#menu h1 img {
	width: 100%;
	}

#menu .btn {
	width: 25px;
	height: 20px;
	top: 14px;
	right: 14px;
	cursor: pointer;
	position: absolute;
	display: block;
	z-index: 101;
	}

#menu .btn span ,
#menu .btn span:before ,
#menu .btn span:after {
	content: "";
	width: 25px;
	height: 3px;
	background: #323232;
	top: 50%;
	left: 0;
	margin: 0;
	transition: .3s;
	display: block;
	position: absolute;
	}

#menu .btn span:before {
	margin: -11px 0 0 0;
	}

#menu .btn span:after {
	margin: 7px 0 0 0;
	}

#menu .btn.close span {
	background: transparent;
	}

#menu .btn.close span:before {
	margin: -2px 0 0 0;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	}

#menu .btn.close span:after {
	margin: -2px 0 0 0;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	}

#menu nav {
	width: 100%;
	height: 100%;
	background: url(../images/common/bg_menu.png);
	background-size: 50px auto;
	margin: 0;
	top: 0;
	left: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	padding: 30px 20px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s, visibility 0.5s;
	overflow: auto;
	}

#menu nav.open {
	opacity: 1;
	visibility: visible;
	}

#menu nav ul {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-wrap: wrap;
	}

#menu nav ul.menu li {
	width: 50%;
	opacity: 0;
	margin: 0 0 30px 0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s ;
	position: relative;
	}

#menu nav ul.menu li.top {
	display: block;
	}

#menu nav ul.menu li::after {
	content: "";
	width: 10px;
	height: 11px;
	background: url(../images/common/ico_point.png) center bottom no-repeat;
	background-size: 10px 11px;
	margin: 0 0 0 -5px;
	bottom: -20px;
	left: 50%;
	position: absolute;
	}

#menu nav ul.menu li:last-child {
	margin: 0;
	}

#menu nav ul.menu li:nth-of-type(n+13)::after {
	display: none;
	}

#menu nav ul.menu li.fade {
	opacity: 1;
	}
}


/* ---------------------------------------------------------- */
/* MAIN */
/* ---------------------------------------------------------- */
#main {
	width: calc(100% - 230px);
	background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url(../images/common/bg_contents.jpg) repeat-y;
	background-size: 40% auto , 40% auto , 100% auto;
	padding: 90px 0 0 0;
	}

#main.bg01 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_01.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg02 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_02.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg03 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_03.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg04 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_04.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg05 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_05.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg06 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_06.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg07 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_07.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg08 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_08.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg09 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_09.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}
#main.bg10 {background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url("../images/common/bg_contents_10.png") top center no-repeat, url(../images/common/bg_contents.jpg) repeat-y;}

#main.bg01 , #main.bg02 , #main.bg03 , #main.bg04 , #main.bg05 , #main.bg06 , #main.bg07 , #main.bg08 , #main.bg09 , #main.bg10 {
	background-size: 40% auto , 40% auto , 100% auto , 100% auto;
	}

@media all and (-ms-high-contrast: none) {
#main {
	min-height: 900px;
	}
}

#main h2 {
	font-size: 4.0rem;
	font-family: 'Cardo', serif;
	line-height: 1;
	text-align: center;
	margin: 0 0 40px 0;
	}

#main h2 .ribbon {
	height: 20px;
	font-size: 1.2rem;
	font-family: 'Noto Serif JP' , 游明朝 , "Yu Mincho" , YuMincho , "Hiragino Mincho ProN" , "Hiragino Mincho Pro" , HGS明朝E , メイリオ , Meiryo , sans-serif;
	color: #fff;
	line-height: 1.5;
	background: #e60014;
	padding: 0 30px;
	display: inline-block;
	top: -10px;
	position: relative;
	}

#main h2 .ribbon:before ,
#main h2 .ribbon:after {
	content: "";
	width: 9px;
	height: 20px;
	position: absolute;
	}

#main h2 .ribbon:before {
	background: url(../images/common/bg_ribbon_left.png) left center no-repeat;
	background-size: 9px 20px;
	left: -9px;
	}

#main h2 .ribbon:after {
	background: url(../images/common/bg_ribbon_right.png) right center no-repeat;
	background-size: 9px 20px;
	right: -9px;
	}

#main h3 {
	text-align: center;
	margin: 0 0 30px 0;
	display: flex;
	align-items: center;
	}

#main h3:before ,
#main h3:after {
	content: "";
	height: 2px;
	background: #c8af46;
	flex-grow: 1;
	}

#main h3:before {
	margin-right: 40px;
	}

#main h3:after {
	margin-left: 40px;
	}

#main h3 span {
	font-size: 2.2rem;
	font-family: 'Cardo' , 'Noto Serif JP' , 游明朝 , "Yu Mincho" , YuMincho , "Hiragino Mincho ProN" , "Hiragino Mincho Pro" , HGS明朝E , メイリオ , Meiryo , sans-serif;
	line-height: 40px;
	margin: auto;
	display: inline-block;
	position: relative;
	}

#main h3 span:before ,
#main h3 span:after {
	content: "";
	width: 22px;
	height: 40px;
	position: absolute;
	}

#main h3 span:before {
	background: url(../images/common/bg_title_left.png) left center no-repeat;
	background-size: auto 40px;
	left: -40px;
	}

#main h3 span:after {
	background: url(../images/common/bg_title_right.png) right center no-repeat;
	background-size: auto 40px;
	right: -40px;
	}

#main .select {
	max-width: 1050px;
	text-align: center;
	margin: 0 auto 100px auto;
	}

#main .select ul {
	display: flex;
	}

#main .select ul li {
	width: 50%;
	}

#main .select ul li:first-child {
	padding: 0 1px 0 0;
	}

#main .select ul li:last-child {
	padding: 0 0 0 1px;
	}

#main .select ul li a ,
#main .select ul li span {
	font-size: 1.8rem;
	color: #3c2f37;
	text-decoration: none;
	background: #f1e7d0;
	padding: 15px;
	display: block;
	position: relative;
	}

#main .select ul li a:hover {
	color: #fff;
	background: #c8af46;
	}

#main .select ul li a.active {
	color: #fff;
	background: #3c2f37;
	pointer-events: none;
	}

#main .select ul li a.active:before {
	content: "";
	border: 10px solid transparent;
	border-top: 10px solid #3c2f37;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	position: absolute;
	}

#main .select ul li span {
	color: #aaa;
	background: #ddd;
	}

@media (max-width: 768px){
#main {
	width: 100%;
	height: 100%;
	min-height: auto;
	background-size: 70% auto , 70% auto , 100% auto;
	margin: 50px 0 0 0;
	padding: 80px 0 0 0;
	}

#main h2 {
	font-size: 3.6rem;
	margin: 0 0 30px 0;
	}

#main h3 {
	margin: 0 0 20px 0;
	}

#main h3 span {
	font-size: 2.0rem;
	}

#main .select {
	margin: 0 0 80px 0;
	}

#main .select ul li a ,
#main .select ul li span {
	font-size: 1.6rem;
	padding: 10px;
	}
}

@media (max-width: 640px){
#main {
	padding: 60px 0 0 0;
	}

#main.bg01 , #main.bg02 , #main.bg03 , #main.bg04 , #main.bg05 , #main.bg06 , #main.bg07 , #main.bg08 , #main.bg09 , #main.bg10 {
	background-size: 40% auto , 40% auto , 150% auto , 100% auto;
	}

#main h2 {
	font-size: 3.0rem;
	margin: 0 0 20px 0;
	}

#main h2 .ribbon {
	height: 15px;
	font-size: 1.0rem;
	line-height: 1.3;
	padding: 0 20px;
	}

#main h2 .ribbon:before ,
#main h2 .ribbon:after {
	width: 7px;
	height: 15px;
	background-size: 9px 15px;
	}

#main h2 .ribbon:before {
	left: -7px;
	}

#main h2 .ribbon:after {
	right: -7px;
	}

#main h3:before {
	margin-right: 30px;
	}

#main h3:after {
	margin-left: 30px;
	}

#main h3 span {
	font-size: 1.8rem;
	line-height: 30px;
	}

#main h3 span:before ,
#main h3 span:after {
	width: 17px;
	height: 30px;
	background-size: auto 30px;
	}

#main h3 span:before {
	left: -30px;
	}

#main h3 span:after {
	right: -30px;
	}

#main .select {
	margin: 0 0 60px 0;
	}

#main .select ul li a ,
#main .select ul li span {
	font-size: 1.2rem;
	padding: 10px;
	}
}


/* ---------------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------------- */
footer {
	width: 100%;
	color: #fff;
	text-align: center;
	background: url(../images/common/bg_line.png) top left repeat-x , #3c2f37;
	background-size: auto 5px , auto;
	padding: 25px 0 20px 0;
	}

footer .link {
	width: 205px;
	top: 640px;
	left: 0;
	position: absolute;
	}

footer .link a:hover {
	opacity: 0.7;
	}

footer .link ul.share {
	display: -webkit-inline-flex;
	display: -ms-inline-flex;
	display: inline-flex;
	margin: 0 0 50px 0;
	position: relative;
	}

footer .link ul.share:after {
	content: "";
	width: 15px;
	height: 17px;
	background: url(../images/common/ico_point.png) center bottom no-repeat;
	background-size: 15px 17px;
	margin: 0 0 0 -7.5px;
	bottom: -30px;
	left: 50%;
	position: absolute;
	}

footer .link ul.share li {
	margin: 0 5px;
	}

footer .link ul.share li a img {
	width: 25px;
	}

footer .link ul.banner li {
	margin: 0 0 5px 0;
	}

footer .link ul.banner li:last-child {
	margin: 0;
	}

footer .link ul.banner li a img {
	width: 170px;
	}

footer .copyright {
	font-size: 1.2rem;
	}

@media (max-width: 768px){
footer {
	background: none;
	padding: 0;
	}

footer .link {
	width: 100%;
	background: url(../images/common/bg_line.png) top left repeat-x , #faf5e1;
	background-size: auto 5px , auto;
	padding: 25px 0 20px 0;
	position: static;
	}

footer .link ul.share {
	margin: 0 0 45px 0;
	}

footer .link ul.share li a img {
	width: 30px;
	}

footer .link ul.banner li a img {
	width: 50%;
	}

footer .copyright {
	background: url(../images/common/bg_line.png) top left repeat-x , #3c2f37;
	background-size: auto 5px , auto;
	padding: 15px 0 10px 0;
	}
}

@media (max-width: 640px){
footer .link ul.banner li a img {
	width: 60%;
	}

footer .copyright {
	font-size: 1.0rem;
	}
}


/* ------------------------------------------------------- */
/* PAGE TOP
---------------------------------------------------------- */
#pageTop {
	width: 50px;
	height: 50px;
	background: #000;
	border-radius: 50px;
	bottom: 15px;
	right: 15px;
	display: block;
	position: fixed;
	z-index: 10;
	}

#pageTop:after {
	content: "";
	width: 10px;
	height: 10px;
	top: 50%;
	right: 50%;
	border-top: 1px solid #c8af46;
	border-right:1px solid #c8af46;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin: -3px -5px 0 0;
	display: block;
	position: absolute;
	}

#pageTop:hover {
	background: #c8af46;
	}

#pageTop:hover:after {
	border-top: 1px solid #323232;
	border-right:1px solid #323232;
	}

@media (max-width: 768px){
#pageTop {
	width: 40px;
	height: 40px;
	bottom: 10px;
	right: 10px;
	}
}


/* ---------------------------------------------------------- */
/* magnific-popup */
/* ---------------------------------------------------------- */
.mfp-container {
	padding: 0 40px;
	}

button.mfp-close ,
.mfp-iframe-holder .mfp-close {
	width: 40px;
	height: 40px;
	background: #000;
	border-radius: 50px;
	top: -25px !important;
	right: -25px;
	opacity: 1;
	display: block;
	padding: 0;
	z-index: 100;
	cursor: pointer;
	overflow: hidden;
	text-indent: 120%;
	white-space: nowrap;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	position: absolute;
	}

.mfp-iframe-holder .mfp-close {
	right: -20px;
	}

button.mfp-close:before ,
button.mfp-close:after {
	content:"";
	width: 3px;
	height: 20px;
	background: #c8af46;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position:absolute;
	display:inline-block;
	}

button.mfp-close:before {
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	}

button.mfp-close:after {
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	}

button.mfp-close:hover {
	background: #c8af46;
	}

button.mfp-close:hover:before ,
button.mfp-close:hover:after {
	background: #000;
	}

.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	}

.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.7;
	}

.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
	}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
	}

/* comment */
.commentWrapper {
	width: 100%;
	max-width: 880px;
	background: url(../images/common/bg_contents_top.png) top left no-repeat , url(../images/common/bg_contents_bottom.png) bottom right no-repeat , url(../images/common/bg_contents.jpg) repeat-y;
	background-size: 40% auto , 40% auto , 100% auto;
	border: 5px solid #c8af46;
	margin: 30px auto;
	padding: 40px;
	align-items: center;
	position: relative;
	}

.commentWrapper .profile {
	margin: 0 0 20px 0;
	}

.commentWrapper .profile .part {
	font-size: 1.4rem;
	line-height: 25px;
	margin: 0 0 5px 15px;
	display: inline-block;
	position: relative;
	}

.commentWrapper .profile .part:before ,
.commentWrapper .profile .part:after {
	content: "";
	width: 14px;
	height: 25px;
	position: absolute;
	}

.commentWrapper .profile .part:before {
	background: url(../images/common/bg_title_left.png) left center no-repeat;
	background-size: auto 25px;
	left: -20px;
	}

.commentWrapper .profile .part:after {
	background: url(../images/common/bg_title_right.png) right center no-repeat;
	background-size: auto 25px;
	right: -20px;
	}

.commentWrapper .profile .name {
	font-size: 4.5rem;
	letter-spacing: 3px;
	line-height: 1;
	}

.commentWrapper.castComment {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	}

.commentWrapper.castComment .photo {
	width: 300px;
	padding: 0 50px 0 0;
	}

.commentWrapper.castComment .photo img {
	width: 100%;
	}

.commentWrapper.castComment .comment {
	width: calc(100% - 300px);
	}

@media (max-width: 768px){
/* comment */
.commentWrapper {
	padding: 40px 30px;
	}

.commentWrapper .profile {
	text-align: center;
	margin: 0 0 20px 0;
	}

.commentWrapper .profile .name {
	font-size: 3.0rem;
	}

.commentWrapper .profile .part {
	margin: 0 0 5px 0;
	}

.commentWrapper.castComment {
	display: block;
	}

.commentWrapper.castComment .photo {
	width: 100%;
	text-align: center;
	padding: 0 0 20px 0;
	}

.commentWrapper.castComment .photo img {
	width: 40%;
	}

.commentWrapper.castComment .comment {
	width: 100%;
	}
}

@media (max-width: 640px){
.mfp-container {
	padding: 0 20px;
	}

button.mfp-close ,
.mfp-iframe-holder .mfp-close {
	width: 30px;
	height: 30px;
	top: -20px !important;
	right: -15px;
	}

button.mfp-close:before{
	height: 15px;
	}

button.mfp-close:after{
	height: 15px;
	}

/* comment */
.commentWrapper {
	padding: 30px 20px;
	}

.commentWrapper .profile .part {
	margin: 0;
	}

.commentWrapper .profile .name {
	font-size: 2.8rem;
	}

.commentWrapper.castComment .photo img {
	width: 50%;
	}
}