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

/*==================================
 body
===================================*/
body {
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 18px;
	line-height: 1.6;
}
#wrapper {
	xmargin-bottom: -121px;
}
#wrapper ul {
	padding-left: 0px;
}
#wrapper a:hover {
	opacity: 1.0;
}

#wrapper h2 {
	min-height: 130px;
	display: block;
	text-align: center;
	margin-bottom: 20px;
	overflow: hidden;
	font-size: 160%;
	color: #505050;
	padding-top: 20px;
	background: url("../img/h2_bg.png") center top no-repeat;
	font-weight: bold;
}
#wrapper h2 span {
	font-family: 'Passion One', cursive;
	font-size: 300%;
	color: #072680;
	line-height: 0.7;
  text-shadow:4px 4px 0 #FFF, -4px -4px 0 #FFF,
              -4px 4px 0 #FFF, 4px -4px 0 #FFF,
              0px 4px 0 #FFF,  0 -4px 0 #FFF,
              -4px 0 0 #FFF, 4px 0 0 #FFF;
}


h3 {
  width: 100%;
  background: -webkit-repeating-linear-gradient(-45deg, #00ADA9, #00ADA9 4px,#11b7b3 3px, #11b7b3 8px);
  background: repeating-linear-gradient(-45deg, #00ADA9, #00ADA9 4px,#11b7b3 3px, #11b7b3 8px);
	margin-bottom: 40px;
	font-weight: bold;
}
h3 .pointy {
  position: relative;
  padding: 0.3em 0;
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	color: #FFF;
	font-size: 150%;
}
h3 .pointy:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #00ADA9;
  width: 0;
  height: 0;
}
h3 div .pre_num {
  position: absolute;
  top: -30px;
  left: 0px;
  padding: 0px 5px;
  font-size: 70%;
	transform: rotate(-5deg);
}
h3 div .balloon {
  position: absolute;
  width: 200px;
  height: 140px;
  top: -30px;
  right: 0px;
  background-size: 100%;
	background: url("../img/balloon.png") no-repeat top center;
	background-size: 100%;
}
h3 div .h3_txt {
	position: relative;
	z-index: 1;
}
h4 {
  transform: rotate(-5deg);
  margin-left: -20px;
  font-size: 150%;
  color: #FFF;/*文字色*/
  padding: 0.5em 2em 0.5em 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  font-weight: bold;
}

h4:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

/*==================================
 color
===================================*/
.dark {
	background: #072680;
}
.red {
	background: #EA5532;
}
.orange {
	background: #F6AD3C;
}
.yellow {
	background: #FFF33F;
}
.green {
	background: #00A95F;
}
.lime {
	background: #00ADA9;
}
.blue {
	background: #00AFEC;
}
.purple {
	background: #4D4398;
}
.pink {
	background: #E85298;
}

.dark_txt {
	color: #072680;
}
.red_txt {
	color: #EA5532;
}
.orange_txt {
	color: #F6AD3C;
}
.yellow_txt {
	color: #FFF33F;
}
.green_txt {
	color: #00A95F;
}
.lime_txt {
	color: #00ADA9;
}
.blue_txt {
	color: #00AFEC;
}
.purple_txt {
	color: #4D4398;
}
.pink_txt {
	color: #E85298;
}

/*==================================
 margin bottom & base setting
===================================*/
.mt_30 {
	margin-top: 30px;
}
.mt_40 {
	margin-top: 40px;
}
.mb_10 {
	margin-bottom: 10px;
}
.mb_30 {
	margin-bottom: 30px;
}
.mb_50 {
	margin-bottom: 50px;
}

.td-sp {
	display: none;
}
.sp_only {
	display: none;
}

img.img_round {
  border-radius: 50%;
}
img.img_round_s {
  border-radius: 10px;	
}
.p_right {
	text-align: right;
}
.p_small {
	font-size: 80%;
}
.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
div.img_center {
	width: 100%;
	text-align: center;
}
div.img_center img {
	max-width: 100%;
	height: auto;
}
div.img_center a {
	display: inline-block;
}
div.img_center a img:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.txt_s {
	font-size: 80%;
}
.atten_li {
	list-style: none;
}
.atten_li li {
	font-size: 80%;
	text-indent: -1em;
	margin-left: 1em;
}
p span {
	font-weight: bold;
}
dd span {
	font-weight: bold;
}
.clear {
	clear: both;
}
section.sns10-section {
	overflow: hidden;
	padding-bottom: 50px;
}
.base_box {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.img_box_meny {
	display: flex;
    justify-content: space-between;
	flex-wrap: nowrap;
}
.img_box_meny div.box_content_3 {
	width: 33%;
}
.img_box_meny div.box_content_2 {
	width: 49%;
}

.btn_box {
	width: 900px;
	display: flex;
    justify-content: space-between;
	flex-wrap: nowrap;
	margin-left: auto;
	margin-right: auto;
}
.btn_base {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
}
.btn_base a {
	display: block;
	width: 400px;
	padding: 20px 0px;
	text-align: center;
	color: #072680;
    background-color: #00AFEC;
	font-weight: bold;
	text-decoration: none;
	border-radius: 40px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.btn_base a:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
    background-color: #3ccafb;
}

/*==================================
 topページ
===================================*/
.key_v {
	position: relative;
	width: 100%;
	height: 800px;
	xbackground: rgba(100, 100, 100, 0.5);
	overflow: hidden;
}
.key_v .bg_01 {
	position: absolute;
	width: 500px;
	height: 0%;
	padding-bottom: 500px;
	top: -150px;
	left: calc(50% - 850px);
	border-radius: 80% 30% 50% 50%/50%;
	z-index: -1;
}
.key_v .bg_02 {
	position: absolute;
	width: 700px;
	height: 0%;
	padding-bottom: 900px;
	top: -100px;
	right: calc(50% - 850px);
	border-radius: 80% 30% 50% 50%/50%;
	z-index: -1;
}
.key_v .bg_03 {
	position: absolute;
	width: 400px;
	height: 0%;
	padding-bottom: 400px;
	top: 30%;
	left: calc(50% - 400px);
	border-radius: 50% 50% 30% 70%/50% 50% 50% 60%;
	z-index: -1;
}
.key_v .logo_campaign {
	position: absolute;
	width: 700px;
	top: 140px;
	left: calc(50% - 450px);
}
.key_v .logo_10th_anni {
	width: 130px;
	position: absolute;
	top: 30px;
	left: 30px;
}
.key_v .photo_01 {
	width: 200px;
	position: absolute;
	top: 80px;
	left: calc(50% + 80px);
	z-index: -1;
}
.key_v .photo_02 {
	width: 250px;
	position: absolute;
	top: 280px;
	left: calc(50% - 680px);
	z-index: -1;
}
.key_v .photo_03 {
	width: 180px;
	position: absolute;
	top: 80px;
	left: calc(50% - 480px);
	z-index: -1;
}
.key_v .photo_04 {
	width: 100px;
	position: absolute;
	top: 55px;
	left: calc(50% - 280px);
	z-index: -1;
}
.key_v .t-shirt {
	width: 560px;
	position: absolute;
	top: 100px;
	left: calc(50% + 200px);
	z-index: -1;
}
.key_v .photo_05 {
	width: 100px;
	position: absolute;
	top: 370px;
	right: calc(50% - 340px);
	z-index: -1;
}

.key_v .icon {
	width: 900px;
	position: absolute;
	top: 480px;
	left: calc(50% - 450px);
	z-index: -1;
}
#index_main {
	margin-top: -220px;
}
.comment_box {
  width: 900px;
  position: relative;
  margin: 3em auto 1em auto;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 50px 22px 50px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #00AFEC 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #072680;
}

.comment_tape {
  width: 30%;
  height: 35px;
  opacity: 0.5;
  margin: -35px auto 12px 35%;
  background-color: #00AFEC; /* 背景色 */
  background-image: radial-gradient(#fff 24%, transparent 0), radial-gradient(#fff 24%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}

.comment_box .comment_img {
	position: absolute;
	width: 150px;
	bottom: 60px;
	right: 60px;
}
.comment_box .comment_img img {
	width: 100%;
	height: auto;
}

.content_left_txt {
	width: 48%;
	float: left;
}

.txt_box_base {
	padding: 20px;
	border-radius: 40px 30px 40px 30px / 30px 40px 30px 40px;
}
.txt_box_s {
	display: inline-block;
	padding: 20px;
	border-radius: 40px 30px 40px 30px / 30px 40px 30px 40px;
}
.txt_box_g {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background: #ccc;
	padding: 20px;
}

.icon {
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	list-style: none;
}
.icon li {
	width: 19%;
	margin-bottom: 10px;
}
.icon li a {
  display: block;
  border-radius: 50%;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon li a:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}


/*==================================
 otherページ
===================================*/
.key_v_other {
	position: relative;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 60px;
}
.key_v_other .logo_campaign {
	width: 250px;
	position: absolute;
	top: 40px;
	left: 30px;
	z-index: 1;
}

/*==================================
 ×　twitter_w
===================================*/
.twitter_w {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/*==================================
×　masonry
===================================*/
#masonry {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}	
#masonry:after {content:''; display:block; clear:both;}

	.grid-sizer,
	.grid-item {width:32%;}
	.gutter-sizer {width:2%;}

.grid-item {
overflow:hidden;
float:left;
}

/*==================================
 messages
===================================*/
.tab {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	margin-bottom: 20px;
}
.tab ul,
.tab li {
	list-style-type: none;
}
.tab li a {
	display: block;
	margin-left: 10px;
	margin-right: 10px;
	padding: 20px 35px;
	color: #FFF;
	background: #072680;
    border-radius: 40px 30px 40px 30px / 30px 40px 30px 40px;
	text-decoration: none;
	font-size: 160%;
	font-weight: bolder;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.tab li a:hover {
	background: #005ba5;
}
.tab li.active a {
	background: #00AFEC;
}

/*エリアの表示非表示と形状*/
.area {
	width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
}
.area div {
	width: 32%;
	padding: 0px 3px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
    border-radius: 40px 20px 40px 20px / 20px 40px 20px 40px;
}
.area div iframe.twitter-tweet {
	max-width: 100%;
}

/*==================================
 history
===================================*/
.h_mt_-80 {
    margin-top: -80px;	
}
.h_mt_10 {
    margin-top: 10px;	
}
.h_mt_40 {
    margin-top: 40px;	
}
.h_mt_80 {
    margin-top: 80px;	
}
.h_mr_1p {
	margin-right: 1%;
}

.h_menu {
  background: #072680;
  padding: 20px 20px;
  position: fixed;
	top: 300px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	z-index: 300;
}
.h_menu ul {
  top: 20px;
  text-align: center;
}
.h_menu li {
    list-style-type: none;
	font-size: 110%;
	font-family: 'Passion One', cursive;
}
.h_menu li a {
    color: #fff;
	text-decoration: none;
}
.h_menu li a:hover {
    color: #EA5532;
}

#area-4 {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#area-4 .h_content {
	width: 1050px;
	float: right;
	padding-bottom: 50px;
}

.content_left {
	width: 60%;
	float: left;
	padding: 5%;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.content_left-tb {
	width: 60%;
	float: left;
	padding: 5%;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.content_left2 {
	width: 60%;
	float: left;
	padding: 5%;
	border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}
.content_right {
	width: 60%;
	float: right;
	padding: 5%;
	border-radius: 80% 30% 50% 50%/50%;
}
.content_right-tb {
	width: 60%;
	float: right;
	padding: 5%;
	border-radius: 80% 30% 50% 50%/50%;
}
.content_right2 {
	width: 60%;
	float: right;
	padding: 5%;
	border-radius: 50% 50% 30% 70%/50% 50% 30% 60%;
}

.content_right_small {
	width: 32%;
	float: right;
	padding: 3%;
	border-radius: 80% 30% 50% 50%/50%;
}
.content_right_small-tb {
	width: 32%;
	float: right;
	padding: 3%;
	border-radius: 80% 30% 50% 50%/50%;
}
.content_left_small {
	width: 32%;
	float: left;
	padding: 3%;
	border-radius: 50% 50% 30% 70%/50% 50% 30% 60%;
}
.content_left_small-tb {
	width: 32%;
	float: left;
	padding: 3%;
	border-radius: 50% 50% 30% 70%/50% 50% 30% 60%;
}
.content_left_half {
	width: 48%;
	float: left;
	padding: 5%;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.content_right_half {
	width: 48%;
	float: right;
	padding: 5%;
	border-radius: 80% 30% 50% 50%/50%;
}
.content_center {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 5%;
	border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}
.content_center_s {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	padding: 5%;
	border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}
.txt_box {
	position: relative;
	width: 100%;
}
.txt_date {
	font-family: 'Passion One', cursive;
	color: #072680;
	font-size: 200%;
}
.txt_details_r {
	position: absolute;
	top: -40px;
	left: 160px;
	right: -50px;
	padding: 10px;
	background: #072680;
	color: #FFF;
	font-size: 80%;
}
.txt_details_r_inline {
	position: absolute;
	top: -40px;
	left: 160px;
	padding: 10px;
	background: #072680;
	color: #FFF;
	font-size: 80%;
}
.txt_details {
	padding: 10px;
	background: #072680;
	color: #FFF;
	font-size: 80%;
}
.txt_details_r:after,
.txt_details_r_inline:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 10px solid transparent;
  border-top: 15px solid #072680;
  width: 0;
  height: 0;
}
.txt_details_r span,
.txt_details span {
	font-weight: bold;
	color: #FFFE88;
}
.txt_details_r a,
.txt_details a {
	color: #FFFE88;
}

.movie_box {
  position: relative;
  margin-top: 10px;
  width: 100%;
  padding-top: 56.25%;
  border: #072680 3px solid;
  border-radius: 3px;
  background: #072680;
}
.movie_box iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.btn_history {
    margin-left: auto;
	margin-right: auto;
}
.btn_history a {
	display: block;
	padding: 10px 40px;
	text-align: center;
	color: #072680;
    background-color: #00AFEC;
	font-weight: bold;
	text-decoration: none;
	border-radius: 40px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
	border: 2px solid #FFF;
}
.btn_history a:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
    background-color: #3ccafb;
}
.tobe_txt {
	font-family: 'Passion One', cursive;
	font-size: 300%;
	text-align: right;
	color: #072680;
}

/*==================================
 About us
===================================*/
.figure_box {
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	color: #505050;
}
.figure_box div.box_content_1 {
	width: 100%;
	padding: 15px 20px;
	border: 6px solid #072680;
	background: rgba(255,255,255,0.7);
}
.figure_box div.box_content_2 {
	width: 49%;
	padding: 15px 20px;
	border: 6px solid #072680;
	background: rgba(255,255,255,0.7);
}
.figure_box div.box_content_3 {
	width: 32%;
	padding: 15px 20px;
	border: 6px solid #072680;
	background: rgba(255,255,255,0.7);
}
.figure_box .figure {
	font-size: 400%;
	font-weight: bold;
}
.qanda {
	border-bottom: 6px solid #072680;
	background: rgba(255,255,255,0.7);
}
.qanda dt {
	border-top: 6px solid #072680;
	padding: 15px 20px 15px 70px;
	background: url("../img/q.png") no-repeat top 0px left 20px;
	min-height: 75px;
	clear: both;
}
.qanda dd {
	border-top: 1px dotted #072680;
	padding: 15px 20px 15px 90px;
	background: url("../img/a.png") no-repeat top 0px left 40px;
	min-height: 75px;
}
.qa_p_s {
	width: 70%;
	float: left;
	padding-bottom: 20px;
}
.qa_img_s {
	width: 25%;
	float: right;
	padding-bottom: 20px;
}
.qa_p_b {
	width: 55%;
	float: left;
	padding-bottom: 20px;
}
.qa_img_b {
	width: 40%;
	float: right;
	padding-bottom: 20px;
}
.qa_box {
	display: flex;
    justify-content: center;
	flex-wrap: wrap;
}
.qa_box div.box_content_2 {
	width: 40%;
	padding: 0px 20px;
}

/*==================================
 1200px
===================================*/
@media screen and (max-width:1200px) {
	
/* base */
#wrapper {
	width: 1200px;
}
h3 .pointy {
	width: 96%;
}
.base_box {
	width: 96%;
}
	
/* top */
.key_v .logo_10th_anni {
	top: 30px;
}
.key_v .photo_01 {
	width: 230px;
	top: 30px;
	left: calc(50% + 30px);
}
.key_v .photo_04 {
	width: 130px;
	top: 20px;
	left: calc(50% - 280px);
}
.key_v .t-shirt {
	width: 570px;
	top: 80px;
	left: calc(50% + 180px);
}
/* message */
.area {
	width: 96%;
}

/* history */
.h_mt_-80 {
    margin-top: 0px;	
}
#area-4 {
	width: 100%;
}

#area-4 .h_content {
	width: 90%;
}
.content_left {
	width: 49%;
	float: left;
}
.content_left2 {
	width: 49%;
	float: left;
}
.content_right {
	width: 49%;
	float: right;
}
.content_right2 {
	width: 49%;
	float: right;
}
.content_right_small {
	width: 49%;
	float: right;
}
.content_left_small {
	width: 49%;
	float: left;
}
.content_left_half {
	width: 49%;
	float: left;
}
.content_right_half {
	width: 49%;
	float: right;
}
.content_left_small-tb {
	clear: both;
	width: 60%;
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.content_right_small-tb {
	clear: both;
	width: 60%;
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.content_right-tb {
	clear: both;
	width: 80%;
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.content_left-tb {
	clear: both;
	width: 80%;
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.txt_details_r {
	position: absolute;
	top: -40px;
	left: 160px;
	right: -40px;
	padding: 10px;
	background: #072680;
	color: #FFF;
	font-size: 80%;
}
	
/* aboutus */
.qa_box div.box_content_2 {
	width: 48%;
	padding: 0px 1%;
}
}

/*==================================
 980px
===================================*/
@media screen and (max-width:980px) {
/* base */

.pc_only {
	display: none;
}
.td-sp {
	display: inline;
}

.btn_box {
	width: 96%;
	display: flex;
	flex-wrap: wrap;
}

/* top */
.key_v {
	width: 100%;
	height: 0px;
	padding-bottom: 80%;
}
.key_v .bg_01 {
	width: 50%;
	height: 0%;
	padding-bottom: 60%;
	top: -15%;
	left: calc(50% - 70%);
}
.key_v .bg_02 {
	width: 60%;
	height: 0%;
	padding-bottom: 70%;
	top: -10%;
	right: calc(50% - 70%);
}
.key_v .bg_03 {
	width: 30%;
	height: 0%;
	padding-bottom: 30%;
	top: 50%;
	left: calc(50% - 30%);
}
.key_v .logo_campaign {
	width: 66%;
	top: 25%;
	left: calc(50% - 45%);
}
.key_v .logo_10th_anni {
	width: 15%;
	top: 3%;
	left: 3%;
}
.key_v .photo_01 {
	width: 18%;
	top: 6%;
	left: calc(50% - 10%);
}
.key_v .photo_02 {
	width: 18%;
	top: 10%;
	left: calc(50% - 35%);
}
.key_v .photo_03 {
	width: 13%;
	top: 54%;
	left: calc(50% - 51%);
}
.key_v .photo_04 {
	width: 10%;
	top: 3%;
	left: calc(50% - 19%);
}
.key_v .t-shirt {
	width: 60%;
	top: 5%;
	left: calc(50% + 3%);
}
.key_v .photo_05 {
	width: 10%;
	top: 52%;
	right: calc(50% - 25%);
}
.key_v .icon {
	width: 90%;
	top: 66%;
	left: calc(50% - 45%);
}
	
#index_main {
	margin-top: -20%;
}
.comment_box {
  width: 96%;
  padding: 22px 2% 22px 2%;
}

/* message */
.area div {
	width: 49%;
}
	
/* aboutus */
.qa_p_s {
	width: 100%;
	float: none;
	padding-bottom: 20px;
}
.qa_img_s {
	width: 45%;
	float: none;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
.qa_p_b {
	width: 100%;
	float: none;
	padding-bottom: 20px;
}
.qa_img_b {
	width: 80%;
	float: none;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
	
}

/*==================================
 700px
===================================*/
@media screen and (max-width:700px) {
body {
	font-size: 14px;
}
h2 {
	font-size: 140%;
}
h2 span {
	font-size: 270%;
}
h4 {
  transform: rotate(-5deg);
  margin-left: 0px;
  font-size: 150%;
  color: #FFF;/*文字色*/
  padding: 0.5em 0.5em 0.5em 2em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  text-indent: -1.5em;
}
h4:before {
  content: '●';
  color: white;
  margin-right: 8px;
}
.pc-tb {
	display: none;
}
.sp_only {
	display: inline;
}
.btn_base {
	max-width: 96%;
}
.btn_base a {
	max-width: 96%;
}
.img_box_meny {
	display: block;
}
.img_box_meny div.box_content_3 {
	width: 100%;
}
.img_box_meny div.box_content_2 {
	width: 100%;
}
	
/*top */
.key_v {
	width: 100%;
	height: 0px;
	padding-bottom: 110%;
}
.key_v .bg_02 {
	width: 70%;
	height: 0%;
	padding-bottom: 80%;
	top: -10%;
	right: calc(50% - 70%);
}
.key_v .logo_campaign {
	width: 86%;
	top: 32%;
	left: calc(50% - 43%);
}
.key_v .logo_10th_anni {
	width: 15%;
	top: 9%;
	left: 3%;
}
.key_v .photo_01 {
	width: 20%;
	top: 10%;
	left: calc(50% - 12%);
}
.key_v .photo_02 {
	width: 25%;
	top: 17%;
	left: calc(50% - 37%);
}
.key_v .photo_03 {
	width: 15%;
	top: 32%;
	left: calc(50% - 51%);
}
.key_v .photo_04 {
	width: 12%;
	top: 9%;
	left: calc(50% - 23%);
}
.key_v .icon {
	width: 84%;
	top: 70%;
	left: calc(50% - 42%);
}
.key_v .t-shirt {
	width: 65%;
	top: 4%;
	left: calc(50% + 0%);
}
.key_v .photo_05 {
	width: 15%;
	top: 60%;
	right: calc(50% - 45%);
}
#index_main {
	margin-top: -5%;
}
.content_left_txt {
	width: 100%;
	float: none;
}
/* other */
.key_v_other {
	position: relative;
	padding-top: 0px;
	padding-bottom: 0px;
}
.key_v_other .logo_campaign {
	width: 250px;
	padding-top: 50px;
	margin-bottom: 20px;
	position: static;
	margin-left: auto;
	margin-right: auto;
}
.txt_box_g {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	background: #ccc;
	padding: 20px 10px;
}

/*　history */
.h_mt_10 {
    margin-top: 0px;	
}
.h_mt_40 {
    margin-top: 0px;	
}
.h_mt_80 {
    margin-top: 0px;	
}
.h_mr_1p {
	margin-right: 0%;
}
	
.h_menu {
  padding: 20px 5px;
	top: auto;
	bottom: 50px;
}
#area-4 .h_content {
	width: 85%;
}
.content_left,
.content_left2,
.content_right,
.content_right2,
.content_right_small,
.content_left_small,
.content_left_half,
.content_right_half,
.content_left_small-tb,
.content_right_small-tb,
.content_right-tb,
.content_left-tb,
.content_center,
.content_center_s {
	clear: both;
	width: 100%;
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
.txt_details_r,
.txt_details_r_inline {
	position: static;
	display: inline-block;
}
.tobe_txt {
	font-size: 250%;
	text-align: center;
}
	
/*　aboutus */
.figure_box div.box_content_1 {
	width: 100%;
	padding: 15px 20px;
}
.figure_box div.box_content_2 {
	width: 100%;
	padding: 15px 20px;
}
.figure_box div.box_content_3 {
	width: 100%;
	padding: 15px 20px;
}

.qanda dt {
	padding: 15px 20px 15px 60px;
	background: url("../img/q.png") no-repeat top 0px left 10px;
}
.qanda dd {
	padding: 15px 20px 15px 80px;
	background: url("../img/a.png") no-repeat top 0px left 30px;
}

/*　message */
.area div {
	width: 100%;
}
.tab li a {
	margin-left: 2px;
	margin-right: 2px;
	padding: 8px 13px;
}
/* aboutus */
.qa_box div.box_content_2 {
	width: 100%;
	padding: 0px 0%;
}

}

/*==================================
669px
===================================*/
@media only screen and (max-width:669px) {
/* base */
#wrapper {
	width: 100%;
}
}