@charset "UTF-8";

/*
======== table of content. ===============

summary:初宮要素

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

@media screen and (max-width: 640px) {

.forpc { display:none; }

#hatsumiya #globalnav .current a {
	background-color:#fa8000;
}

#hatsumiya #content {
	padding:10px 10px 210px;
}

#content #inner {
	background:none;
}

aside {
	float:none;
	width:100%;
}

#hatsumiya aside h1 a {
	display:block;
	width:100%;
	max-height:160px;
	margin-bottom:20px;
	background:url(../images/title_hatsu_sp.png) no-repeat 0 0;
	background-size:contain;
}

aside div {
	text-align:center;
}

aside div img {
	margin-bottom:20px;
	border:3px solid #fff;
}

aside div p {
	width:90%;
	margin:0 auto 20px;
	font-size:100%;
	text-align:left;
}

#localnav {
	margin-bottom:20px;
}

#localnav li {
	position:relative;
	padding:4px;
	margin-bottom:5px;
}

#localnav a {
	display:block;
	position:relative;
	height:30px;
	line-height:30px;
	border:1px solid #fff;
	background:none;
	color:#fff;
	overflow:hidden;
}

#localnav #trigger {
	padding:0;
	background-color:#fa8000;
}

#main {
	float:none;
	width:auto;
	padding:10px;
}

.bluecontent,
.skycontent,
.pinkcontent,
.redcontent,
.purplecontent,
.orangecontent {
	margin-bottom:20px;
}


.bluecontent h1,
.skycontent h1,
.pinkcontent h1,
.redcontent h1,
.purplecontent h1,
.orangecontent h1 {
	width:auto;
	background-position:100% 0;
	font-size:128%;
}

.bluecontent .inner,
.skycontent .inner,
.pinkcontent .inner,
.redcontent .inner,
.purplecontent .inner,
.orangecontent .inner {
	padding:20px 10px;
}

.bluecontent .box,
.skycontent .box,
.pinkcontent .box,
.redcontent .box,
.purplecontent .box,
.orangecontent .box {
	position:relative;
	padding:9px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-pie-border-radius:5px;
	background-color:#fff;
}


.titlefix h2 {
	width:100%;
}

footer {
	position:relative;
	height:200px;
	margin:-200px auto 0;
}


.forpc { display:none; }
img.forpc { display:none; }
br.forpc { display:none; }

.forsp { display:block; }
br.forsp { display:inline; }
img.forsp { display:inline; }

/* トップ
------------------------------------------*/
.point h2 {
	width:60%;
	margin-bottom:10px;
	padding-left:20px;
	font-size:16px;
	line-height:34px;
}
.point p.txt_intro {
	position:relative;
	width:auto;
	color:#e73462;
	font-size:114%;
}

.point .photowrap {
	margin-bottom:10px;
}

.point .photowrap img {
	width:110px !important;
	height:110px !important;
}


.photo .absolute {
	position:relative;
	top:0;
	right:0;
	width:100%;
	max-width:422px;
	height:auto;
	margin:0 auto 10px;
}

.dress .absolute {
	position:relative;
	top:0;
	right:0;
	width:100%;
	max-width:264px;
	height:auto;
	margin:0 0 10px 5%;
}


.price {
	font-size:114%;
}

.price strong {
	font-size:166%;
}

.oiwai .bigin img,
.oiwai .birth img {
	position:relative;
	bottom:auto;
	right:auto;
	float:right;
	width:40%;
	max-width:156px;
	height:auto;
	margin:0 0 0 10px;
	
}

.oiwai .titlefix h2 {
	/*background-color:#a25ca1;*/
}

.oiwai .box_flex { display: block; }
.oiwai .box_flex > section { width: auto; }

.oiwai .box_flex table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.oiwai .box_flex th { padding: 5px 0; border-bottom: 1px solid #fa8000; vertical-align: middle; color: #fa8000; text-align: left; }
.oiwai .box_flex table span { font-size: 85.7%; }
.oiwai .box_flex td { padding: 5px 0; border-bottom: 1px solid #fa8000; vertical-align: middle; color: #fa8000; font-weight: bold; }


.btn_orange a {
	width:100%;
	padding: 2px; 
	font-size: 18px;
}
.btn_orange a > span {
height: 60px;
padding-top: 18px;
}
.btn_orange a > span span {
display: block;
}


.oiwai .bigin p,
.oiwai .birth p {
	width:auto;
}

.oiwai .birth p {
	min-height:66px;
}

.access img {
	float:none;
	margin:0 0 10px;
	padding:2px;
}

.contactbox.titlefix h2 {
	width:100%!important;
}


.btn_purple {
	position:relative;
	margin:0 -10px;
	text-align:right;
}

.contactbox.titlefix h2 {
	width:100%;
}

.contactbox .dial {
	font-size:100%;
}

.contactbox .dial span {
	display:block;
}

.contactbox p {
	font-size:67%;
}

.contactbox .arrow_rb {
	font-size:100%;
}

/* 衣裳
------------------------------------------*/
.costume .photos {
	position:relative;
}

.costume .dress_boys {
	position:relative;
	width:50%;
	z-index:10;
}
.costume .dress_girls {
	position:absolute;
	right:0;
	top:0;
	width:50%;
	z-index:1;
}
.costume .dress_boys img,
.costume .dress_girls img {
	width:100%!important;
	height:auto!important;
}

.costume .dress_set  {
	position:relative;
	margin-top:10px;
	z-index:15;
}
.costume .dress_set span {
	display:inline-block;
	width:228px;
}


/* 流れ
------------------------------------------*/
.flow .orangecontent h2 {
  padding: 0 15px;
  border-radius: 15px;
  font-size: 100%;
}
.flow .orangecontent .bg_orange {
  box-sizing: border-box;
  width:100%;
  height: auto;
  padding: 0 15px;
  border-radius: 15px;
  font-size: 100%;
	line-height:30px;
}

.flow .box_youtube { position: relative; width: 100%; margin-bottom: 30px; padding-top: 56.25%; }
.flow .box_youtube iframe { position: absolute; left:0; top:0; width: 100%; height: 100%;  }

.flow .box_time1 { position: relative; width: 75%; }
.flow .box_time1:before { right: -5%; width: 4px; }
.flow .box_time1:after { right: -38%; font-size: 75%; }

.flow .box_time2 { position: relative; width: 75%; }
.flow .box_time2:before { right: -5%; width: 4px; }
.flow .box_time2:after { right: -38%; font-size: 75%; }

.flow .aligncenter img { max-width: 100%; height: auto; }

/* FAQ
------------------------------------------*/
.faq .answer img {
	width:100%!important;
	height:auto!important;
}

/* 衣裳コレクション
------------------------------------------*/
.outfit .outfitcontent h3 { }
.outfit .outfitcontent ul { }
.outfit .outfitcontent li { width:46.5%; margin-bottom:20px; }
.outfit .outfitcontent li a { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color:rgba(0,0,0,0); }

}

@media screen and (max-width: 480px) {

#hatsumiya aside h1 a {
	max-height:120px;
}

.contactbox .photowrap {
	display:none;
}

.point h2 {
	width:46%;
}

.access img {
	float:none;
	width:254px !important;
	height:174px !important;
	margin:0 0 10px;
	padding:2px;
}

}

@media screen and (max-width: 400px) {

#hatsumiya aside h1 a {
	max-height:100px;
}

.costume .dress_boys span,
.costume .dress_girls span {
	font-size:75%;
}

.faq #main h1 {
	font-size:114%;
	line-height:1.1;
	min-height:30px;
	padding:10px 15px 0;
}


}

@media screen and (max-width: 360px) {

.btn_orange a {
	font-size: 15px;
}


}