@charset "utf-8";
/***************************************************
information
	filename : app_article.css;
***************************************************/
html {margin: 0;padding: 0;box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
/****************** 幅指定 ******************/
.articleBox {width: var(--app-main-width-con);}
.mainVisual, .articleBox h2.style1, .articleBox h2.style2, .articleBox h2.style3, .articleBox h3.style1, .articleBox h3.style2, .articleBox h3.style3, .articleBox table, .DLBox, .articleBox ul, .articleBox ol, .videoMax, .policy {width: var(--app-main-width-con);}

.articleBox p.widths,
.articleBox h4.style1,
.articleBox h4.style2,
.articleBox h4.style3,
.articleBox h5.style1 {width: var(--app-main-width-con-s);}

.formThanks .articleBox p,
.formThanks .articleBox h2.style1,
.formThanks .articleBox h2.style2,
.formThanks .articleBox h2.style3,
.formThanks .articleBox h3.style1,
.formThanks .articleBox h3.style2,
.formThanks .articleBox h3.style3,
.formThanks .articleBox table,
.formThanks .DLBox,
.formThanks .articleBox ul,
.formThanks .articleBox ol,
.formThanks .videoMax,
.formThanks .policy {width: 100%;}

.formThanks .articleBox p.widths,
.formThanks .articleBox h4.style1,
.formThanks .articleBox h4.style2,
.formThanks .articleBox h4.style3,
.formThanks .articleBox h5.style1 {width: 90%;}

.sp_prev .mainVisual,
.sp_prev .articleBox,
.sp_prev .articleBox p,
.sp_prev .articleBox h2.style1,
.sp_prev .articleBox h2.style2,
.sp_prev .articleBox h2.style3,
.sp_prev .articleBox h3.style1,
.sp_prev .articleBox h3.style2,
.sp_prev .articleBox h3.style3,
.sp_prev .articleBox table,
.sp_prev .DLBox,
.sp_prev .articleBox ul,
.sp_prev .articleBox ol,
.sp_prev .videoMax,
.sp_prev .policy {width: 100%;}

.sp_prev .articleBox p.widths,
.sp_prev .articleBox h4.style1,
.sp_prev .articleBox h4.style2,
.sp_prev .articleBox h4.style3,
.sp_prev .articleBox h5.style1 {width: 90%;}

/****************** 記事エリア ******************/
/* メインビジュアル（システム登録反映箇所） */
.mainVisual {
	margin: 0 auto 30px auto;
	padding: 0;
	text-align: center;
}
.mainVisual img {max-width: 100%;margin: 0px auto;}

/* 記事エリア */
.articleBox {margin: 0 auto;padding: 0;}

/**** pタグ要素基本 ****/
.articleBox p {
	margin: 0 auto;
	padding: 0px 10px 20px;
	font-size: 16px;
	line-height: 1.8em;
	max-width: 100%;
}
.articleBox p.style1 {
	margin: 30px auto;
	padding: 25px;
	border: 4px solid var(--app-main-brd-a);
	border-radius: 2px;
}
.articleBox p.style2 {
	margin: 30px auto;
	padding: 25px;
	background: var(--app-main-cr-a);
	border: 4px solid var(--app-main-brd);
	border-radius: 2px;
}
.articleBox p.style3 {
	margin: 30px auto;
	padding: 25px;
	background: var(--app-main-cr);
	border-radius: 2px;
	color: var(--app-main-txt);
}
.articleBox p.style4 {
	margin: 30px auto;
	padding: 25px;
	background: var(--app-main-cr-ar);
	border: 4px solid var(--app-main-brd-ar);
	border-radius: 2px;
}
.articleBox p.style5 {
    background-color: #e5e5e5;
    padding: 20px 30px;
    margin: 30px 0;
}
.articleBox p.style6 {
    position: relative;
    padding:0.25em 1em;
}
.articleBox p.style6:before,
.articleBox p.style6:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
	border:solid #eac5aa;
}
.articleBox p.style6:before{
    border-width: 3px 0 0 3px;
    top:0;
    left: 0;
}
.articleBox p.style6:after{
    border-width: 0 3px 3px 0;
    bottom:0;
    right: 0;
}

/**** タイトル要素基本 ****/
.articleBox h2 {
	margin: 40px auto 20px auto;
	padding: 30px 15px;
	font-size: 35px;
	font-weight: normal;
	text-align: center;
	line-height: 1.4em;
}
.articleBox h2.style1 {
	border-top: 1px solid var(--app-main-brd-k);
	border-bottom: 1px solid var(--app-main-brd-k);
}
.articleBox h2.style2 {
	border-top: none;
	border-bottom: none;
	background: var(--app-main-cr);
	color: var(--app-main-txt-u);
}
.articleBox h2.style3 {
	border-left: 7px solid var(--app-main-cr);
	border-top: none;
	border-bottom: none;
	background: var(--app-main-cr-a);
	text-align: left;
}
.articleBox h2.style4 {
	border-left: 7px solid var(--app-main-cr);
	border-top: none;
	border-bottom: 1px solid var(--app-main-cr-a);
	text-align: left;
	padding:0.2em 0 0.2em 0.5em;
	font-size:26px;
	font-weight: 300;
}
.articleBox h2.style5, .articleBox .float .floatText h2.style5 {
  line-height: 60px;
  position: relative;
  width: auto;
  height: 60px;
  margin: 2em 50px 1em;
  padding: 0 2rem;
  text-align: center;
  background: #eecccc;
}
.articleBox h2.style5::before,
.articleBox h2.style5::after {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #eecccc;
}
.articleBox h2.style5::before {
  left: -40px;
  border-left-width: 15px;
  border-left-color: transparent; }

.articleBox h2.style5::after {
  right: -40px;
  border-right-width: 15px;
  border-right-color: transparent; }

.articleBox h2.style6 {
  text-align: center;
  padding: 0.6em 0.25em;
  border-radius:8px;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
  }

.articleBox h2.style7 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #AADDAA;
  max-width: calc(100vw - 14px);
}

.articleBox h2.style7:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid ;
}

.articleBox h3 {
	margin: 40px auto 20px auto;
	padding: 20px 15px;
	font-size: 30px;
	color: var(--app-basic-txt);
	font-weight: normal;
	text-align: center;
	line-height: 1.6em;
}
.articleBox h3.style1 {
	border-bottom: 1px solid var(--app-main-brd-k);
	text-align: left;
}
.articleBox h3.style2 {
	border: 1px solid var(--app-main-brd-k);
	text-align: center;
	border-radius: 2px;
}
.articleBox h3.style3 {
	background: var(--app-main-cr);
	color: var(--app-main-txt);
	text-align: center;
	border-radius: 3px;
}
.articleBox h3.style4 {
    border-bottom: 1px #cccccc solid;
    font-size: 18px;
    font-weight: bold;
    margin: 8px 0 12px;
    padding: 0 0 8px;
    text-align: left;
}
.articleBox h4 {
	margin: 40px auto 20px auto;
	padding: 20px;
	font-size: 25px;
	color: var(--app-basic-txt);
	font-weight: bold;
	text-align: center;
}
.articleBox h4.style1 {
	background: var(--app-main-cr-a);
	text-align: left;
	border-radius: 3px;
}
.articleBox h4.style2 {
	background: var(--app-main-cr);
	color: var(--app-main-txt);
	text-align: left;
	border-radius: 3px;
}
.articleBox h4.style3 {
	padding: 10px 20px 20px 20px;
	border-left: 7px solid var(--app-main-brd-k);
	border-bottom: 1px solid var(--app-main-brd-k);
	text-align: left;
}
.articleBox h5 {
	margin: 5px auto;
	padding: 10px;
	font-size: 22px;
	color: var(--app-basic-txt);
	font-weight: bold;
	text-align: center;
}
.articleBox h5.style1 {
	border-bottom: 1px solid var(--app-main-brd);
	text-align: left;
}
/**** span要素基本 ****/
.articleBox span.mck {
	background: linear-gradient(transparent 50%, rgba(255,255,0,0.2) 50%);
}
.articleBox span.mck_bl {
	background: linear-gradient(transparent 50%, rgba(0,125,255,0.2) 50%);
}
.articleBox span.mck_rd {
	background: linear-gradient(transparent 50%, rgba(255,0,0,0.2) 50%);
}
.articleBox span.ubdr {
	color: var(--main-txt-ub);
	border-bottom: 2px solid var(--app-main-txt-ub);
}
/**** table要素基本 ****/
.articleBox table {
	margin: 20px auto;
	border: 1px solid var(--app-main-brd);
}
.articleBox th {
	padding: 15px;
	background: var(--app-main-cr-a);
	border: 1px solid var(--app-main-brd);
}
.articleBox td {
	padding: 15px;
	border: 1px solid var(--app-main-brd);
}
/* DLタグ */
.DLBox {
	margin: 30px auto;
	padding: 0;
	font-size:16px;
	border-top: 1px solid var(--app-main-brd-a);
}
.DLBox dl {margin: 0 auto;padding: 0;border-bottom: 1px solid var(--app-main-brd-a);}
.DLBox dt {float:left;width:25%;margin: 0;padding: 15px 10px;}
.DLBox dd {float:left;width:60%;margin: 0;padding: 15px 10px;}

.DLBox dl.bga {background: var(--app-main-cr-u);}
.DLBox dl.bgb {background: var(--app-main-cr-u);}

/* リスト */
.articleBox ul,
.articleBox ol {
	margin: 0 auto;
	padding: 0 10px 0 calc(1.6em + 5px);
	font-size: 16px;
	line-height: 1.4em;
	max-width: 100%;
}
.articleBox ul li {margin-top: 5px;margin-left: 5px;margin-bottom: 5px;}
.articleBox ol li {margin-top: 5px;margin-left: 5px;margin-bottom: 5px;}

/* 個別画像サイズ指定 */
.articleBox img {max-width: 100%;height: auto;}

/**** テンプレート基本 ****/
.policy {margin: 0 auto;}

.articleBox .policy h2 {
	padding: 10px 15px;
	font-size: 22px;
	font-weight: bold;
	text-align: left;
	border-bottom: 1px solid var(--app-main-brd);
}
.articleBox .policy h3 {
	margin: 20px auto;
	padding: 10px 15px;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
}
.LiBox_style1 {
	margin: 30px auto;
	padding: 10px 15px;
	background: var(--app-main-cr-a);
	border: 2px solid var(--app-main-brd);
	border-radius: 3px;
}
/* *************************
テンプレート対応 
************************* */
/*  award  */
#main.award .mainClnD {
    position: relative;
}
#main.award .rank_date_c_area {
    position: absolute;
    top: 60px;
    right: 24px;
    z-index: 1;
}
#main.award .rank_date_c_area p {
    background-color: transparent;
    display: none;
}
#main.award .rank_date_c_area p.view {
    display: inline-block;
}
#main.award .con_ti,
#main.award h1.det_ti,
#main.award ul.DetcateName,
#main.award .mainVisual,
#main.award .siteShareBox:nth-of-type(1),
#main.award #SNSboxArea{display: none;}

#award {
    background: url(../../../../edit_tamplate/images/award_header.png)center top / 100% no-repeat,
    url(../../../../edit_tamplate/images/award_footer.png)center calc(100% + 18px)/ 100% no-repeat,
    #F4F0E6;
    position: relative;
    padding: 60px 60px 120px;
}
#award *{max-width:100%;}
#award h2 {
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: 32px;
    line-height: 36px;
    margin: 2em auto 1em;
    padding: 1em 0 0;
}
#award .date {
 text-align: center;
 background: url(../../../../edit_tamplate/images/ribbon.svg)center center / auto 100% no-repeat;
 padding: 0em;
 color: #fff;
}
#award figure img {
    width: 280px;
    background: linear-gradient(-135deg, #BFA066, #E2D4B9);
    padding: 10px;
    margin: 16px auto;
}

#award figure {
    text-align: center;
    max-width: 80%;
	margin: auto;
}

#award figcaption {
    font-weight: bold;
    line-height: 1.4em;
    text-align: center;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
    font-size: 24px;
}
#award .sub {font-size: 14px;}

.signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
    font-size: 24px;
    margin-top: 32px;
}
.gallary_t {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:24px auto;
}
.gallary_t .img {
    max-width: 100%;
    margin: 0 auto 16px;
}
.gallary_t .text {
    max-width: 100%;
    background: var(--app-main-cr-a);
    padding: 10px 20px;
}
.gallary_l {
    display: flex;
    justify-content: flex-start;
    margin:24px auto;
}
.gallary_l .img {
    width: 36%;
    flex-shrink: 0;
    margin-right: 16px;
}
.gallary_l .chara {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight:600;
    margin: 0 0 8px;
}
.gallary_l .chara .title{
    font-size: 14px;
}
.gallary_t .text,
.gallary_l .text,
.gallary_r .text{
    width: 100%;
}
.gallary_t .text p:not([class]),
.introBox p{
	padding-left:0;
	padding-right:0;	
}
.introBox {
    background: var(--app-main-cr-a);
    border: 4px solid var(--app-main-brd);
    padding: 8px 16px;
}
.gallary_r {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin:24px auto;
}
.gallary_r .img {
    width: 36%;
    flex-shrink: 0;
    margin-left: 16px;
}
.gallary_flex {
    display: flex;
    flex-wrap:wrap;
    align-items: flex-end;
}
.gallary_flex figure{
    margin: 0 8px 8px 0;
    text-align:center;
}
.pcview .gallary_flex.col2 figure:nth-child(2n),
.pcview .gallary_flex.col3 figure:nth-child(3n){
    margin-right: 0px;
}
.gallary_flex.col2 figure{
	width:calc((100% - 8px) / 2);
} 
.gallary_flex.col3 figure{
	width:calc((100% - 16px) / 3);
} 
.spview .gallary_flex {
    justify-content: center;
}
.spview .gallary_flex figure{
    display: inline-block;
    margin: 0 10px 1em;
    text-align:center;
    width:auto;
}

.articleBox .float .LayoutR{
    margin: 0 0 16px 16px;
}
.articleBox .float .LayoutL {
    margin: 0 16px 16px 0;
}
.float p,
.float h2{
    display: grid;
    width: auto;
}
.float .floatText{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
.float .floatText p,
.float .floatText h2{
    display: block;
    width: 100%;
}
.articleBox .float > .floatText:nth-child(2) > *:first-child{
	margin-top:0;
}
.articleBox .float p:not([class])  {
    display: block;
    padding-left:0;
    padding-right:0;
}
.float figcaption{text-align:center;}
.event .info dl {
    display: flex;
    flex-direction: column;
    border: solid var(--app-glnv-cr);
    border-width: 1px 1px 1px 4px;
}

.event .info dt {
    border-bottom: 1px solid var(--app-glnv-cr);
    background: var(--app-main-cr-a);
    font-size: 14px;
    padding: 0.5em 16px;
}

.event .info dd {
    padding: 0.5em 16px;
}

.event .map {
    width: 100%;
    height: 450px;
    text-align: center;
}

.event .map iframe {
    width: 100%;
    padding: 24px 0;
    height: 100%;
    max-height:90vw;
}
/*テーブルテンプレート*/
.spview table.spVertical,
.spview .spVertical tbody,
.spview .spVertical tr,
.spview .spVertical th,
.spview .spVertical td {
    display:block;
    width: 90vw!important;
}
.spview .spVertical tr{
    border:1px solid var(--app-main-brd);
}
.spview .spVertical td{
    border:1px solid var(--app-main-brd-a);
}
.articleBox .tableSroll{
    width:100%;
    overflow-x: auto;
    margin:auto;
}
.articleBox .tableSroll table{
    width: var(--app-main-width-con);
}
.spview .articleBox .tableSroll{width:95%;}
.spview .articleBox .tableSroll table{
	width: 800px;
}
.articleBox .tableInfo{font-size: 80%;padding-left: 0;}
.pcview .tableInfo{display:none;}
/*対話テンプレート*/
.articleBox .dialogue {
    list-style: none;
    padding: 0 10px;
}
.articleBox .dialogue li {
    display: flex;
    margin: 0 0 2em;
}
.dialogue .img{flex-shrink:0;max-width: 25%;}
.articleBox  .dialogue .text{
	width:100%;
	margin: 0;
	align-self: center;
	padding-top:20px;
	border-radius:10px;
}
.articleBox .d_left .text{margin-left: 1em;}
.articleBox .d_right .text{margin-right: 1em;}
.dialogue .d_right {flex-direction: row-reverse;}
.d_left .text{
	border:2px solid #e7e7e7;
}
.d_right .text{
	background:#e2f6ff;
}
.fukidashi .text{
	position:relative;
}
.fukidashi .text::before{
	content:"";
	position:absolute;
	top: 0;
	bottom: 0;
	margin:auto;
	width:0;height:0;
	border-style:solid;
}
.fukidashi .d_left .text::before{
	left:-0.8em;
	border-width:0.5em 0.8em 0.5em 0;
	border-color:transparent #e7e7e7 transparent transparent;
}
.fukidashi .d_right .text::before{
	right:-0.8em;
	border-width:0.5em 0 0.5em 0.8em;
	border-color:transparent transparent transparent #e2f6ff;
}

/*特別テンプレート*/
.spTemplate .mainClnD {
    margin: auto;
    float: none;
}
.spTemplate .sideClnD {
    display: none;
}

/* 見出し付きBOX */
.articleBox .midashi1 {
    border: 4px solid #7ebfff;
    border-radius: 10px;
    position: relative;
    max-width: 95vw;
    margin: 1em auto;
}
.articleBox .midashi1 .midashiTtl {
    position: absolute;
    top: 0;
    left: 0.5em;
    transform: translateY(-50%);
    padding: 0 0.5em;
    max-width: 90%;
    line-height: 1;
    font-size:120%;
    font-weight: 600;
    color: #7ebfff;
    background: var(--app-bg-cr);
}
.articleBox .midashiTxt{
	width:100%;
	padding: 1em;
}
.articleBox .midashiTxt{
	padding-top:20px;
}
.articleBox .midashiTxt > :last-child{
	margin-bottom:0;
	padding-bottom: 0;
}
.articleBox .midashi2 {
    background:#bcdeff;
    max-width: 95vw;
    margin: 1em auto;
}
.articleBox .midashi2 .midashiTtl {
    padding: 0.7em 1em;
    text-align:center;
    font-size:120%;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #7ebfff;
}
/*** ビデオ埋め込み共通 ***/
.videoMax{margin: 0 auto;max-width:100%;padding: 10px;}
.videoMax *{max-width:100%;}
.articleBox .videoMax p{padding:0 0 0.5em;}
.articleBox .videoMax .innvideo{position:relative;width:100%;padding: 56.25% 0 0 0;}
.videoMax .innvideo iframe{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width: 100%;height: 100%;max-width: 100%;max-height: 100%;}
.spview .videoMax .innvideo iframe{max-width:100%;max-height:100%;}

/********* ログイン規約要素 *********/

.login_rules.login_det_Box {width: 900px;margin: 10px auto 20px auto;padding: 5px 15px;}
.login_rules .login_area {width: 100%;margin: 5px auto 20px auto;}
.login_rules_area {
	width: 100%;
	height: 200px;
	margin: 20px auto 30px auto;
	padding: 5px 15px;
	overflow-y: scroll;
	border: 1px solid var(--app-main-brd);
	font-size: 14px;
}
.login_rules_area p {margin: 20px auto;}
.login_rules_area ul,
.login_rules_area ol {
	margin: 0 auto;
	padding: 0 20px;
	font-size: 16px;
	line-height: 1.4em;
	font-size: 14px;
}
.login_rules_area ul li {margin-top: 5px;margin-left: 5px;margin-bottom: 5px;}
.login_rules_area ol li {margin-top: 5px;margin-left: 5px;margin-bottom: 5px;}
.login_rules_area a {color: #005cd9;}

.login_rules_detail.login_area {width: 900px;margin: 10px auto 20px auto;}
.login_rules_detail_inn {
	width: 100%;
	margin: 0px auto;
	padding: 15px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: var(--app-main-cr-u);
	border: 1px solid  var(--app-main-brd);
}

.login_rules .login_rules_field {width: 400px;margin: 0 auto 10px auto;}
.login_rules .login_rules_field dl {padding: 5px 0;}
.login_rules .login_rules_field dt {width: 100px;float: left;}
.login_rules .login_rules_field dd {width: 300px;float: left;}
.login_rules .regLinkArea {width: 500px;margin: 0 auto 10px auto;padding: 5px 0;}


/********* 言語切替要素 *********/
#header .snavi {padding-top: 0px;}
#header .langadd {float: left;margin-top: 20px;}

.LangSelect {width: 250px;margin: 0 auto 5px auto;padding: 0px;}
@media screen and (min-width: 481px) {
  .LangSelect.lang3{width: 375px;}
}
.LangSelect li {display: inline-block;padding: 0px 2px;}
.LangSelect a {
	width: 120px;
	margin: 0px;
	padding: 5px;
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background: var(--app-main-cr-u);
	border: 1px solid  var(--app-main-brd);
	color: var(--app-basic-txt);
}
.LangSelect a.crt,
.LangSelect a:hover {background: var(--app-main-cr);color: var(--app-main-txt);text-decoration: none;}


/* ===================================================================================
for Ipad max-width: 1024px
=================================================================================== */
@media screen and (min-width:768px) and ( max-width:1024px) {

	/****************** 幅指定 ******************/
	.articleBox {width: var(--app-main-width-con-ipad);}
	.mainVisual, .articleBox h2.style1, .articleBox h2.style2, .articleBox h2.style3, .articleBox h3.style1, .articleBox h3.style2, .articleBox h3.style3, .articleBox table, .DLBox, .articleBox ul, .articleBox ol, .videoMax, .policy {width: var(--app-main-width-con-ipad);}

	.articleBox p.widths,
	.articleBox h4.style1,
	.articleBox h4.style2,
	.articleBox h4.style3,
	.articleBox h5.style1 {width: var(--app-main-width-con-s-ipad);}

	.popup .mainVisual {width: 100%;}
	.popup .articleBox,
	.popup .articleBox h2.style1,
	.popup .articleBox h2.style2,
	.popup .articleBox h2.style3,
	.popup .articleBox h3.style1,
	.popup .articleBox h3.style2,
	.popup .articleBox h3.style3,
	.popup .articleBox table,
	.popup .DLBox,
	.popup .articleBox ul,
	.popup .articleBox ol,
	.popup .videoMax,
	.popup .policy,
	.popup .articleBox p.widths,
	.popup .articleBox h4.style1,
	.popup .articleBox h4.style2,
	.popup .articleBox h4.style3,
	.popup .articleBox h5.style1 {width: 90%;}

}

/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {

	/* メインビジュアル（システム登録反映箇所） */
	.mainVisual {
		width: 100%;
	}

	/**** pタグ要素基本 ****/
	.articleBox {width: 100%;}
	.articleBox p {
		width: 90%;
		font-size: 4.2vw;
		line-height: 1.8em;
	}
	.articleBox p.style1,
	.articleBox p.style2,
	.articleBox p.style3,
	.articleBox p.style4,
	.articleBox p.style5 {
		margin: 20px auto;
	}
	.articleBox p.widths {
		width: 85%;
	}
	/**** タイトル要素基本 ****/
	.articleBox h2 {
		padding: 20px 10px;
		font-size: 5.0vw;
		font-weight: bold;
	}
	.articleBox h2.style1 {
		width: 100%;

	}
	.articleBox h2.style2,
	.articleBox h2.style3 {
		width: 90%;
	}
	.articleBox h2.style4{
		font-size:4vw;
		padding: 0.5em 0 0.5em 0.5em;
		font-weight: 600;
	}
	.articleBox h3 {
		padding: 10px 5px;
		font-size: 5.0vw;
		font-weight: bold;
	}
	.articleBox h3.style1,
	.articleBox h3.style2,
	.articleBox h3.style3 {
		width: 90%;
	}
	.articleBox h4 {
		margin: 20px auto 10px auto;
		padding: 10px;
		font-size: 5.0vw;
	}
	.articleBox h4.style1,

	.articleBox h4.style2 {
		width: 90%;
	}
	.articleBox h4.style3 {
		width: 90%;
		padding: 10px 10px 15px 10px;
	}
	.articleBox h5 {
		margin: 5px auto;
		padding: 10px;
		font-size: 5.0vw;
	}
	.articleBox h5.style1 {
		width: 85%;
	}
	/**** table要素基本 ****/
	.articleBox table {
		width: 90%;
	}
	.articleBox th {
		padding: 10px;
	}
	.articleBox td {
		padding: 10px;
	}
	/* DLタグ */
	.DLBox {
		width: 90%;
		margin: 30px auto;
		padding: 0;
		font-size:4.2vw;
	}
	.DLBox dl {}
	.DLBox dt {float:left;width:30%;margin: 0;padding: 15px 5px;}
	.DLBox dd {float:left;width:65%;margin: 0;padding: 15px 5px;}

	/* リスト */
	.articleBox ul,
	.articleBox ol {
		width: 90%;
		margin: 0 auto;
		/* padding: 0 10px 0 calc(1.5em + 5px); */
		font-size: 4.2vw;
		line-height: 1.6em;
	}

	/* 個別画像サイズ指定 */

	/**** テンプレート基本 ****/
	.policy {width: 90%;}

	.articleBox .policy h2 {
		padding: 10px 5px;
		font-size: 5.0vw;
	}
	.articleBox .policy h3 {
		padding: 10px 15px;
		font-size: 4.2vw;
	}
	.articleBox .float p,
	.gallary_t .text p,
	.introBox p{
		width: 100%;
		margin-left:0;
		margin-right:0;
	}
	/********* ログイン規約要素 *********/
	.login_rules.login_det_Box {width: 100%;padding: 10px 10px;}
	.login_rules_detail.login_area {
		width: 95%;
		margin: 20px auto;
	}
	.login_rules_detail_inn {
		width: 100%;
		margin: 0px auto;
		padding: 5px;
	}
	.login_rules_area {
		height: 150px;
	}

	.login_rules a.btWtW,
	.login_rules button.btWtW {width: 100%;padding: 15px 0px;font-size:4.0vw;}
	.login_rules a.btWtM {width: 90%;padding: 10px 0px;font-size:4.0vw;}

	.login_rules .login_rules_field {width: 100%;margin: 0 auto 10px auto;}
	.login_rules .login_rules_field dl {padding: 5px 0;}
	.login_rules .login_rules_field dt {width: 100%;float: none;}
	.login_rules .login_rules_field dd {width: 100%;float: none;}
	.login_rules .regLinkArea {width: 100%;margin: 0 auto 10px auto;padding: 5px 0;}

	/********* 言語切替要素 *********/
	.LangSelect {width: 90%;margin: 0 auto 5px auto;padding: 0px;}
	.LangSelect li {display: inline-block;padding: 0px;width: 49%;}
	.LangSelect a {
		width: 100%;
		margin: 0px;
		padding: 10px;
	}
}
/* *************************
テンプレート対応 
************************* */
/*  award  */
.spview #award {
	background: url(../../../../edit_tamplate/images/award_header_sp.png)center top / 100% no-repeat,url(../../../../edit_tamplate/images/award_footer_sp.png)center bottom/ 100% no-repeat,#F4F0E6;
	padding: 20vw 4%;
}
.spview #award h2 {
	margin: 1em auto;
}
.spview .gallary_l{flex-direction:column;}
.spview .gallary_r{flex-direction:column-reverse;}
.spview .gallary_l .img,
.spview .gallary_r .img {
	width: 90%;
	margin: auto;
	text-align: center;
}
.spview .gallary_l .text,
.spview .gallary_r .text {
	padding: 10px 0;
}
.spview .gallary_t,
.spview .gallary_l,
.spview .gallary_r,
.spview .float,
.spview .event,
.spview .floatText h2 {
	margin: 16px;
}
.spview .float .floatText h2{
	margin: 0;
}
.spview .borderBox{
	width:95%;
}
.spview .borderBox p,
.spview .midashiTxt p{
	width: 100%;
	padding: 0 0 20px;
}
.spview .borderBox ul,
.spview .borderBox ol,
.spview .midashiTxt ul,
.spview .midashiTxt ol{
	width: 100%;
	padding: 0 0 20px 1.5em;
}
.spview ul.dialogue{
    padding: 10px;
    margin: 0;
    width: 100%;
}
.spview .dialogue .text{
    margin-top: 0;
    padding: 1em;
}
@media screen and (max-width: 640px) {
	.articleBox .float .LayoutL,
	.articleBox .float .LayoutR{text-align:center;margin: 0 auto 16px;}
}
/*---------------------------------------
  2021 newface 2021.05.21
---------------------------------------*/

#wrapNewFace{
	width:800px;
	max-width: 100%;
	margin:0 auto 40px auto;
}
#wrapNewFace ul{margin:0;padding:0;list-style:none;}

#wrapNewFace div.tabNavi ul{
	margin:80px 0 0 0;
	display: flex;
	border:2px solid #b5b4b2;
	border-radius: 40px;
	justify-content: space-around;
	box-shadow: 5px 5px #b5b4b2;
	background: #fff;
}
#wrapNewFace div.tabNavi ul li{
	border-right:2px solid #b5b4b2;
	width: 100%;
	padding-right: 5px;
}
#wrapNewFace div.tabNavi ul li:nth-last-child(1){
	border-right:none;
}
#wrapNewFace div.tabNavi ul li a{
	display: flex;
	font-size:16px;
	height: 100%;
	min-height: 65px;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-decoration: none;
	line-height: 1.4em;
}

#wrapNewFace div.tabNavi ul li:nth-child(1) a{
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

#wrapNewFace div.tabNavi ul li:last-child a{
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}

#wrapNewFace div.tabNavi ul li:nth-child(1) a{color:#3b9584;}
#wrapNewFace div.tabNavi ul li:nth-child(2) a{color:#3084b1;}
#wrapNewFace div.tabNavi ul li:nth-child(3) a{color:#8fa845;}
#wrapNewFace div.tabNavi ul li:nth-child(4) a{color:#c07c47;}
#wrapNewFace div.tabNavi ul li:nth-child(5) a{color:#bd6986;}
#wrapNewFace div.tabNavi ul li:nth-child(6) a{color:#716696;}

#wrapNewFace div#tab1.tabNavi ul li:nth-child(1) a{color:#fff;background:#3b9584;}
#wrapNewFace div#tab2.tabNavi ul li:nth-child(2) a{color:#fff;background:#3084b1;}
#wrapNewFace div#tab3.tabNavi ul li:nth-child(3) a{color:#fff;background:#8fa845;}
#wrapNewFace div#tab4.tabNavi ul li:nth-child(4) a{color:#fff;background:#c07c47;}
#wrapNewFace div#tab5.tabNavi ul li:nth-child(5) a{color:#fff;background:#bd6986;}
#wrapNewFace div#tab6.tabNavi ul li:nth-child(6) a{color:#fff;background:#716696;}


/*hover*/
#wrapNewFace div.tabNavi ul li:hover a{color:#fff;}
#wrapNewFace div.tabNavi ul li:hover:nth-child(1) a{background:#3b9584;}
#wrapNewFace div.tabNavi ul li:hover:nth-child(2) a{background:#3084b1;}
#wrapNewFace div.tabNavi ul li:hover:nth-child(3) a{background:#8fa845;}
#wrapNewFace div.tabNavi ul li:hover:nth-child(4) a{background:#c07c47;}
#wrapNewFace div.tabNavi ul li:hover:nth-child(5) a{background:#bd6986;}
#wrapNewFace div.tabNavi ul li:hover:nth-child(6) a{background:#716696;}



#wrapNewFace .persons{
	margin:40px 0 0 0;
	border-radius: 15px;
	display: flex;
	padding:20px;
	background: #fff;
}
#wrapNewFace .persons .pImg{width:270px;}
#wrapNewFace .persons .pTxt{width:477px;}

#wrapNewFace .backBtn{
	width:210px;
margin:30px auto 0 auto;
}
#wrapNewFace .backBtn a{
	display: block;
	width:100%;
	font-size:16px;
	line-height: 40px;
	text-align: center;
	border-radius: 30px;
	text-decoration: none;
}

#wrapNewFace .tag{
	width:133px;
	text-align: center;
	color:#fff;
	font-size: 16px;
	line-height: 40px;
	border-radius: 10px;
}

#wrapNewFace dl.name dt{
	padding:25px 0 0 0;
	font-size: 20px;
	line-height: 35px;
}
#wrapNewFace dl.name dd{
	font-size:32px;
	line-height: 62px;
}
#wrapNewFace dl.name dd small{
	font-size:16px;
	padding-left:1em;
}

#wrapNewFace dl.qa{font-size:14px;line-height: 26px;}

#wrapNewFace dl.qa dt{
	margin:30px 0 10px 0;
}

#wrapNewFace dl.qa dt span.qHead{
	padding-right:10px;
	margin-right:10px;
	font-size:22px;
}
#wrapNewFace #block1 .persons{border:2px solid #3b9584;box-shadow: 5px 5px #92beb2;}
#wrapNewFace #block2 .persons{border:2px solid #3084b1;box-shadow: 5px 5px #8cb1d0;}
#wrapNewFace #block3 .persons{border:2px solid #8fa845;box-shadow: 5px 5px #bbca8e;}
#wrapNewFace #block4 .persons{border:2px solid #c07c47;box-shadow: 5px 5px #daaf8a;}
#wrapNewFace #block5 .persons{border:2px solid #bd6986;box-shadow: 5px 5px #d8a6b5;}
#wrapNewFace #block6 .persons{border:2px solid #716696;box-shadow: 5px 5px #a59ebf;}

#wrapNewFace #block1 .tag{background:#3b9584;}
#wrapNewFace #block2 .tag{background:#3084b1;}
#wrapNewFace #block3 .tag{background:#8fa845;}
#wrapNewFace #block4 .tag{background:#c07c47;}
#wrapNewFace #block5 .tag{background:#bd6986;}
#wrapNewFace #block6 .tag{background:#716696;}

#wrapNewFace #block1 dl.qa dt{color:#3b9584;}
#wrapNewFace #block1 dl.qa dt span.qHead{border-right:2px dotted #3b9584;}
#wrapNewFace #block2 dl.qa dt{color:#3084b1;}
#wrapNewFace #block2 dl.qa dt span.qHead{border-right:2px dotted #3084b1;}
#wrapNewFace #block3 dl.qa dt{color:#8fa845;}
#wrapNewFace #block3 dl.qa dt span.qHead{border-right:2px dotted #8fa845;}
#wrapNewFace #block4 dl.qa dt{color:#c07c47;}
#wrapNewFace #block4 dl.qa dt span.qHead{border-right:2px dotted #c07c47;}
#wrapNewFace #block5 dl.qa dt{color:#bd6986;}
#wrapNewFace #block5 dl.qa dt span.qHead{border-right:2px dotted #bd6986;}
#wrapNewFace #block6 dl.qa dt{color:#716696;}
#wrapNewFace #block6 dl.qa dt span.qHead{border-right:2px dotted #716696;}

#wrapNewFace #block1 .backBtn a{border:2px solid #3b9584;color:#3b9584;}
#wrapNewFace #block1 .backBtn a:hover{background:#3b9584;color:#fff;}
#wrapNewFace #block2 .backBtn a{border:2px solid #3084b1;color:#3084b1;}
#wrapNewFace #block2 .backBtn a:hover{background:#3084b1;color:#fff;}
#wrapNewFace #block3 .backBtn a{border:2px solid #8fa845;color:#8fa845;}
#wrapNewFace #block3 .backBtn a:hover{background:#8fa845;color:#fff;}
#wrapNewFace #block4 .backBtn a{border:2px solid #c07c47;color:#c07c47;}
#wrapNewFace #block4 .backBtn a:hover{background:#c07c47;color:#fff;}
#wrapNewFace #block5 .backBtn a{border:2px solid #bd6986;color:#bd6986;}
#wrapNewFace #block5 .backBtn a:hover{background:#bd6986;color:#fff;}
#wrapNewFace #block6 .backBtn a{border:2px solid #716696;color:#716696;}
#wrapNewFace #block6 .backBtn a:hover{background:#716696;color:#fff;}


#wrapNewFace .balloon{
  position: relative;
  display: block;
  width: 100%;
  background: #ecd3db;
  margin: 15px auto 0;
}
#wrapNewFace  div.tabNavi ul li.hasSub{
  position: relative;
}
#wrapNewFace div.tabNavi ul li.hasSub::before{
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  right:0;
  width:0;
  margin: auto;
  border: 15px solid transparent;
  border-bottom: 15px solid #ecd3db;
}

#wrapNewFace #tabSub{
	display: flex;
	width:100%;
justify-content: space-around;
background: #ecd3db;
padding:15px 0;
}

#wrapNewFace .balloon.tab1,
#wrapNewFace #tabSub.tab1{background:#cfece7;}
#wrapNewFace div.tabNavi ul li.hasSub:nth-child(1)::before{border-bottom-color:#cfece7;}
#wrapNewFace .balloon.tab2,
#wrapNewFace #tabSub.tab2{background:#c9e2f0;}
#wrapNewFace div.tabNavi ul li.hasSub:nth-child(2)::before{border-bottom-color:#c9e2f0;}
#wrapNewFace .balloon.tab3,
#wrapNewFace #tabSub.tab3{background:#e1e9c9;}
#wrapNewFace div.tabNavi ul li.hasSub:nth-child(3)::before{border-bottom-color:#e1e9c9;}
#wrapNewFace .balloon.tab4,
#wrapNewFace #tabSub.tab4{background:#eddacb;}
#wrapNewFace div.tabNavi ul li.hasSub:nth-child(4)::before{border-bottom-color:#eddacb;}
#wrapNewFace .balloon.tab5,
#wrapNewFace #tabSub.tab5{background:#edd6de;}
#wrapNewFace div.tabNavi ul li.hasSub:nth-child(5)::before{border-bottom-color:#edd6de;}
#wrapNewFace .balloon.tab6,
#wrapNewFace #tabSub.tab6{background:#dddae6;}
#wrapNewFace div.tabNavi ul li.hasSub:nth-child(6)::before{border-bottom-color:#dddae6;}

#wrapNewFace #tabSub li a{color:#4e4f4c;text-decoration: underline;}

#wrapNewFace br.brsp{
	display: none;
}


.spview #wrapNewFace{
	width:90%;
	margin:0 auto;
}

.spview #wrapNewFace div.tabNavi ul{
	margin: 40px auto 0 auto;
	width: 100%;
}
.spview #wrapNewFace div.tabNavi ul li a{
	font-size:11px;
	min-height: 45px;
	height: 100%;
}


.spview #wrapNewFace .persons{
	margin:30px 0 0 0;
	border-radius: 10px;
	display: block;
	padding:15px;
}
.spview #wrapNewFace .persons .pImg{
	width:192px;
	margin:0 auto;
}
.spview #wrapNewFace .persons .pImg img{
	width:100%;
}
.spview #wrapNewFace .persons .pTxt{
	padding:20px 0 0 0;
	width:100%;
}

.spview #wrapNewFace .backBtn{
	width:165px;
	margin:20px auto 0 auto;
}
.spview #wrapNewFace .backBtn a{
	font-size:12.5px;
	line-height: 32px;
}

.spview #wrapNewFace .tag{
	width:105px;
	font-size: 12px;
	line-height: 30px;
	border-radius: 5px;
}

.spview #wrapNewFace dl.name dt{
	padding:20px 0 0 0;
	font-size: 16px;
	line-height: 27px;
}
.spview #wrapNewFace dl.name dd{
	font-size:25px;
	line-height: 49px;
}
.spview #wrapNewFace dl.name dd small{
	font-size:12px;
	padding-left:1em;
}

.spview #wrapNewFace dl.qa{font-size:14px;line-height: 26px;}

.spview #wrapNewFace dl.qa dt{
	margin:20px 0 10px 0;
}

.spview #wrapNewFace dl.qa dt span.qHead{
	padding-right:10px;
	margin-right:10px;
	font-size:17px;
}



.spview #wrapNewFace #tabSub{
	display: flex;
	flex-wrap:wrap;
	width: 95%;
	justify-content:flex-start;
	padding:15px 0;
	margin: auto;
	font-size:12px;
}
.spview #wrapNewFace #tabSub li{
	padding: 5px;
	width:25%;
	margin: 5px 0;
}

.spview #wrapNewFace #tabSub li a{color:#4e4f4c;text-decoration: underline;}
.spview br.brsp{
	display: block;
}

/*利用規約対応*/
.pagetop{bottom:60px;}
#footerSub .footer_privacy{text-align: right;}