@charset "utf-8";

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Access CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

.col_01{
	padding: 4em 0;
}
.col_01 h2{
	/*width: 180px;*/
  margin: 0 auto;
}
.col_01 p.lead{
	text-align: center;
	margin-top: 2em;
	letter-spacing: .1em;
}
.col_01 ul.salon{
	width: 75%;
  margin: 2.5em auto;
  max-width: 750px;
}
.col_01 h3 {
  font-size: 1.8em;
  letter-spacing: .3em;
  line-height: 1em;
  margin-bottom: 1.2em;
}
.col_01 h3.online_title{
	letter-spacing: .1em;
      color: #fff;
}
.col_01 h3 span{
    display: block;
    color: #b28c54;
    font-size: 1.4rem;
    letter-spacing: 0.8em;
    padding-bottom: 20px;
}
.col_01 .info .txt li:nth-child(3){
	position: relative;
}
.col_01 .info .txt span.freedial{
	padding-left: 2.8em;
}
.col_01 .info .txt span.freedial:before{
	position: absolute;
  content: " ";
  width: 2.5em;
  height: 2.5em;
  background: url(https://tokyowaso-photowedding.com/img/access/FreeDialLogo.svg) no-repeat;
  background-size: 2.5em;
  left: 0;
  top: 2.3em;
}
.col_01 ul.salon li{
	width: 48%;
	float: left;
	text-align: center;
  padding: 1em 0;
  border: 2px solid #555;
  position: relative;
}
.col_01 ul.salon li:after{
  position: absolute;
  content: " ";
  right: 1.2em;
  top: 41%;
  width: 0.8em;
  height: 0.8em;
  background: url(https://tokyowaso-photowedding.com/img/place/index/arrow.svg) no-repeat;
  background-size: 0.8em;
}
.col_01 ul.salon li.list01{
	margin-right: 2%;
}
.col_01 ul.salon li.list03{
	margin-left: 2%;
}
.col_01 .salon_area{
    width: 1040px;
    background-color: #fff;
    margin: 0em auto 50px;
    text-align: center;
    padding: 40px 0 1px;
}
.col_01 .salon_area .photo{
	width: 80%;
	margin: 0 auto;
}
.col_01 .salon_area .info{
	width: 80%;
  margin: 3em auto;
}
.col_01 .salon_area .info .txt{
	width: 50%;
	float: left;
	text-align: left;
	padding-right: 3.5em;
}
.col_01 p.note{
	font-size: 90%;
  margin-top: 2em;
}
.col_01 span.note{
	font-size: 90%;
	display: block;
	margin-top: 0.5em;
}
.col_01 .salon_area .info .txt li{
	padding: 0.5em 0;
  border-bottom: 1px solid #eee;
}
.col_01 .salon_area .info .txt li span:first-child{
  display: block;
  font-weight: bold;
}
.col_01 .salon_area .info .txt li.online_text{
  border: none;
}
.col_01 .salon_area .info iframe {
	display:block;
	width: 50%;
	float: left;
}
.col_01 .salon_area .info .online_step{
	display:block;
	width: 50%;
	float: left;
	border: 1px solid #eee;
	margin-top: 10px;
  padding: 15px 20px;
}
.col_01 .salon_area .info .online_step ul{

}
.col_01 .salon_area .info .online_step ul li{
	text-align: left;
	position: relative;
	border-bottom: 1px solid #eee;
	padding: 15px 0 10px;
  line-height: 1.5;
}
.col_01 .salon_area .info .online_step ul li::before{
	content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top: 10px solid #eee;
}
.col_01 .salon_area .info .online_step ul li::after{
	content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 11px solid transparent;
  border-top: 11px solid #fff;
  margin-top: -3px;
}
.col_01 .salon_area .info .online_step ul li:last-child,
.col_01 .salon_area .info .online_step ul li:last-child::after,
.col_01 .salon_area .info .online_step ul li:last-child::before{
	border: none;
}
.col_01 .salon_area .info .online_step ul li span{
	color: #349b97;
}
.col_01 .reserve{
	display: block;
  width: 400px;
  margin: 3em auto 0 auto;
  background-color: #349b97;
  color: #fff;
  padding: 1.2em 0;
  letter-spacing: .2em;
  font-size: 1.2em;
  position: relative;
}
.col_01 .reserve span:after{
	position: absolute;
  content: " ";
  right: 0.8em;
  top: 38%;
  width: 1.1em;
  height: 1.1em;
  background: url(https://tokyowaso-photowedding.com/img/common/ico_arrow.png) no-repeat;
  background-size: 1.1em;
}
.col_01 .fair{
	color: #349b97;
	width: 400px;
  margin: 2em auto 0 auto;
  display: block;
  letter-spacing: .2em;
  position: relative;
}
.col_01 .fair span:after{
	position: absolute;
	content: " ";
	right: 7em;
  top: 12%;
  width: 1.2em;
  height: 1.2em;
  background: url(https://tokyowaso-photowedding.com/img/common/ico_arrow_color.png) no-repeat;
  background-size: 1.2em;
}

/* お問い合わせ関連ボタン(調整)
------------------------ */
.container .contact_box .btn_box {
	max-width: 830px;
	width: 100%;
	margin: 0 auto;
	float: none;
}
@media screen and (max-width: 1500px) {
	.plan.index .wrapper .container h1 {
		background-size: auto 100%;
	}
}
/*
------------------------------------------------------------------------------------------------------------------ Tablet */

@media screen and (max-width: 768px) {
	.col_01{
   padding: 4em 0 0 0;
 }
 .col_01 .salon_area,
 .col_02 .salon_area{
  width: 97%;
}
.col_01 .salon_area .photo,
.col_01 .salon_area .info,
.col_02 .salon_area .photo,
.col_02 .salon_area .info{
  width: 86%;
}

/* お問い合わせ関連ボタン
------------------------ */
.container .contact_box {
	padding: 20px 15px;
}
.container .contact_box h4 {
	font-size: 1.8rem;
}
.container .contact_box .btn_box li a {
	line-height: 47px;
	font-size: 1.4rem;
}
.container .contact_box .btn_box li a img {
	width: 27px;
	vertical-align: -8px;
}

/*
------------------------------------------------------------------------------------------------------------------ SmartPhone */

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

	.col_01 {
    padding: 4em 0 3em 0;
  }
.col_01 h3 {
  font-size: 1.2em;
  letter-spacing: .3em;
  line-height: 1em;
  margin-bottom: 1.2em;
}
.col_01 h3.online_title{
	letter-spacing: .1em;
      color: #fff;
}
  .col_01 ul.salon {
    width: 90%;
    margin: 2em auto 0 auto;
    background: #fff;
  }
  .col_01 ul.salon li {
    width: 50%;
    border: none;
    font-size: 1.6rem;
    padding: 0.5em 0 1.3em;
    background: url(https://tokyowaso-photowedding.com/img/access/img_gray.png) no-repeat right;
    background-size: 1px 26px;
    background-position: 0 10px;
    margin: 0;
  }
  .col_01 ul.salon li.list01{
    background: none;
    margin: 0;
  }
  .col_01 ul.salon li.list03{
    letter-spacing: -0.05em;
    margin: 0;
  }
  .col_01 ul.salon li span{
    font-size: 1.2rem;
  }
  .col_01 ul.salon li span.online_button{
    display: none;
  }
  .col_01 ul.salon li.list02 {
    margin: 0;
  }
  .col_01 ul.salon li:after{
    top: 60%;
    right: 0;
    left: 50%;
    background-size: 0.6em;
    width: 0.6em;
    height: 0.6em;
  }
  .col_01 .salon_area{
    width: 100%;
    padding: 2em 0 3.5em 0;
  }
  .col_01 .salon_area .photo {
    width: 95%;
  }
  .col_01 .salon_area .info{
    width: 86%;
    margin: 1em auto;
  }
  .col_01 .salon_area .info .txt {
    width: 100%;
    float: none;
    padding-right: 0;
  }
  .google-maps {
    position: relative;
    padding-bottom: 120%;
    height: 0;
    overflow: hidden;
    margin-top: 2em;
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
  .col_01 .reserve {
    width: 84%;
    font-size: 1.1em;
    margin: 2em auto 0 auto;
  }
  .col_01 .fair {
    width: 100%;
  }
  .col_01 .salon_area {
    width: 90%;
    margin: 2.5em auto;
  }
  .col_01 .salon_area .info .online_step{
    width: 100%;
    padding: 15px 15px 5px;
  }
  .col_01 .fair span:after{
    right: 5.5em;
  }
  .col_01 p.note {
    margin-top: 1em;
  }
	/* お問い合わせ関連ボタン
	------------------------ */
	.container .contact_box h4 {
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 320px) {
	.col_01 .salon_area{
		width: 95%;
	}
	.col_01 .reserve{
		font-size: 1em;
	}
	.col_01 .reserve span:after {
    right: 1em;
  }
  .col_01 .fair span:after{
    right: 4.5em;
  }
  .col_01 ul.salon li:after {
    right: 1em;
  }
}