@charset "UTF-8";

.info_box{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}

.info_box_in{
    width: 60%;
}

@media screen and (max-width: 768px) {
	.info_box_in {
	    width: 90%;
	}
}

.caution_info{
    display: block;
    margin: 30px auto;
    width: 80%;
}

#yakuyoke_info .caution_info ul{
    list-style-type: disc;
}

.caution_title{
	font-weight: bold;
}

body {
	margin: 0;
	padding: 0;
	/*background-color: #abcdff;
	background:
  linear-gradient(135deg, #abcdff 21px, #fff3c7 22px, #fff3c7 24px, transparent 24px, transparent 67px, #fff3c7 67px, #fff3c7 69px, transparent 69px),
  linear-gradient(225deg, #abcdff 21px, #fff3c7 22px, #fff3c7 24px, transparent 24px, transparent 67px, #fff3c7 67px, #fff3c7 69px, transparent 69px)0 64px;
  background-color:#abcdff;
  background-size: 64px 128px;*/
    background-size: 70px 70px;
  background-image: conic-gradient(from 0deg, #fff 0deg 45deg, #dae9ff 45deg 135deg, #fff 135deg 225deg, #dae9ff 225deg 315deg, #fff 315deg 360deg);
  background-repeat: repeat;
/*  background-size: 100px 50px;
  background-image:
    radial-gradient(circle farthest-side at 100% 150%, #fff 14%, #dae9ff 15%, #dae9ff 18%, #fff 19%, #fff 30%, #dae9ff 31%, #dae9ff 34%, #fff 35%, #fff 46%, #dae9ff 47%, #dae9ff 50%, transparent 50%, transparent),
    radial-gradient(circle farthest-side at 0% 150%, #fff 14%, #dae9ff 15%, #dae9ff 18%, #fff 19%, #fff 30%, #dae9ff 31%, #dae9ff 34%, #fff 35%, #fff 46%, #dae9ff 47%, #dae9ff 50%, transparent 50%, transparent),
    radial-gradient(circle closest-corner at 50% 100%, #fff 28%, #dae9ff 30%, #dae9ff 36%, #fff 38%, #fff 60%, #dae9ff 62%, #dae9ff 68%, #fff 70%, #fff 92%, #dae9ff 94%, #dae9ff 100%, transparent 100%, transparent),
    radial-gradient(circle farthest-side at 100% 50%, #fff 14%, #dae9ff 15%, #dae9ff 18%, #fff 19%, #fff 30%, #dae9ff 31%, #dae9ff 34%, #fff 35%, #fff 46%, #dae9ff 47%, #dae9ff 50%, transparent 50%, transparent),
    radial-gradient(circle farthest-side at 0% 50%, #fff 14%, #dae9ff 15%, #dae9ff 18%, #fff 19%, #fff 30%, #dae9ff 31%, #dae9ff 34%, #fff 35%, #fff 46%, #dae9ff 47%, #dae9ff 50%, #fff 50%, #fff);
*/}

.wrapper {
	width: 98%;
	margin: 0 auto 10px;
	background-color: rgba(255,255,255,0.8);
}
#yakuyoke_info {
	padding: 10px 0;
}

h3{
	margin-top: 20px;
	display: block;
	border-bottom: 1px solid #666;
	font-family: serif;
	font-size: 30px;
}

@media screen and (max-width: 1105px) {
	.h1_title{
		font-size: 55px;
		line-height: 1.2;
	}
}

.h1_title span{
	display: inline-block;
}

.titleH2{
	text-align: center;
	font-size: 40px;
	font-family: serif;
}

.h2_title span{
	display: inline-block;
}

.keyVisual {
	width: 50%;
	margin: 0 auto;
}

.keyVisualWap{
	display: flex;
}


#yakuyoke_info .title{
	padding: 10px 0;
}

#yakuyoke_info .title p{
/*    text-align: center;*/
    margin: 0;
	padding: 0;
	font-size: 16px;
}

#yakuyoke_info .text{
	display: block;
    margin: 30px auto;
    width: 80%;
}

#yakuyoke_info .main_image{
	width: 100%;
    height: 600px;
    overflow: hidden;
    margin-bottom: 80px;
}

#yakuyoke_info .main_image img{
	width: 100%;
}

#yakuyoke_info .subImage{
	width :80%;
	margin: 30px auto !important;
	display: block;
}

#yakuyoke_info .subImage img{
	margin: 0 auto;
	width: 48%;
	height: 100%;
}

#yakuyoke_info table{
	border-collapse: collapse;
	/*overflow: scroll;*/
	display: block;
	margin: 0 auto;
}

#yakuyoke_info .flex_box{
	width: 80%;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
}

#yakuyoke_info .yaku_table{
	width: 48%;
	margin: 0 auto;
}

#yakuyoke_info .yaku_table img{
	width: 100%;
}

#yakuyoke_info .schadule_table{
	width: 48%;
	margin: 0 auto;
}


#yakuyoke_info .schadule_table th{
	border: 1px solid #000;
	padding: 10px 0;
	background: #fdd3c3; 
}

#yakuyoke_info .schadule_table td{
	border: 1px solid #000;
	padding: 10px 20px;
}


#yakuyoke_info .schadule_table td {
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #77c3df;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

#yakuyoke_info .schadule_table td:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}


#yakuyoke_info .schadule_table tr:nth-of-type(even){
	background: #ffe9e1;
}

#yakuyoke_info .schadule_table tr:nth-of-type(odd){
	background: #fff9f7;
}

#yakuyoke_info ul{
	list-style-type: none;
}

#yakuyoke_info .red{
	color: red;
}

#yakuyoke_info .alignR{
	text-align: right;
}

.title {
    font-size: 28px;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 5px;
    z-index: 10;
    color: #000;
    background-image: url(../img/top_main.jpg?date2023);
    background-size: cover;
    width: auto;
    background-position: center;
    height: 30vh;
    position: relative;
    min-height: 225px;
}

.main_title {
	position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-color: rgba(000,000,000,0.5);
}

.title h1{
	font-size: 60px;
    text-align: center;
    margin: 0;
	padding: 0;
	color: #fff;
	font-family: serif;
	font-weight: normal;
}

.title h2{
    text-align: center;
	font-size: 30px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: serif;
}

.text{
    width: 90vw;
    margin: 0 auto;
}

.info,
.profile{
	width: 80%;
	max-width: 900px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
}

.profile .img{
	width: 30%;
}

.profile .val{
	width: 68%;
}

.dlbox{
    width: 100%;
    margin-right: 2%;
    /*min-width: 370px;*/
}

.ulbox{
	flex:1;
	width: 100%;
}

.dlbox dl{
	padding-top: 20px;
}

.dlbox dt{
	font-weight: bold;
}


.dlbox dl {
  position: relative;
  padding: 1rem 2rem calc(1rem + 2px);
  background: #fff3c7;
}

.dlbox dl:before {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  content: '';
  border: 2px solid #84b2f4;
}

.dlbox dt{
	border-bottom: 2px solid #84b2f4;
	margin-bottom: 5px;
}

.dlbox dd{
	margin-left: 5px;
}

.flex_guest{
    width: 60vw;
    margin: 0 auto;
	/*padding: 0 100px;*/
	display: box;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	-moz-justify-content: space-around;
	-ms-justify-content: space-around;
	-o-justify-content: space-around;
	justify-content: space-around;
}

.guestImg{
	background: #b4b1b1;
    width: 225px;
    box-shadow: 11px 11px 1px 1px #ccc;
}

.guestImg dt img{
    width: 100%;
}

.guestImg dd{
	text-align: center;
	padding: 10px;
    margin: 0 auto;
}

/*.flex_guest::before {
    content: "";
    display: block;
    width: 225px;
    order: 1;
}

.flex_guest::after {
    content: "";
    display: block;
    width: 225px;
}*/

.eventBox{
	padding-bottom: 20px;
}

.timeTable{
    border-bottom: 1px dashed #84b2f4; 
}

.eventContents{
	padding-left: 16px;
}

.eventTitle{
	padding-left: 32px;
    text-indent: -16px;
}

.guestName{
	padding-left: 48px;
    text-indent: -16px;
}

#yakuyoke_info .ulbox ul{
	list-style: disc;
}

#yakuyoke_info .ulbox ol{
	padding-left: 1em;
	list-style: none;
}

#yakuyoke_info .ulbox ol>li{
	padding-top: 2px;
	padding-bottom: 0;
}

#yakuyoke_info .ulbox li{
	padding-bottom: 10px;
}

#formBody {
	padding: 20px 10px;
	margin: 10px auto 20px;
	font-size: 14px;
}

#formBody .inputBox {
	padding-left: 50px;
	margin-bottom: 5px;
}

#formBody .formBox {
	padding: 10px 0;
	width: 100%;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}

#formBody label {
	display: block;
	font-size: 15px;
	padding-bottom: 5px;
	color: #666;
}

#formBody input[type="email"],
#formBody input[type="text"],
#formBody textarea {
    border:1px solid #888;
	width: 700px;
	padding: 2px;
	font-size: 15px;
	color: #515151;
	background: #fff;
	margin: 5px 10px;
	-webkit-appearance: none;
}

@media screen and (min-width: 769px) and (max-width: 820px) {
	#formBody input[type="email"],
	#formBody input[type="text"],
	#formBody textarea {
		width: 80%;
	}
}

#formBody select {
	border:1px solid #888;
	padding: 2px;
	color: #515151;
	background: #fff;
	margin: 5px 10px;
}

/*エラー時の入力欄背景*/
#formBody .errorInput {
  	background: #f4dede !important;
}

#formBody .submit{
	display: inline-block;
	border:none;
	padding: 4px 30px;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	background: #007aff;
/* Webkit */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#007aff),
        to(#007aff)
        );
    -webkit-box-shadow: 0;
    -webkit-appearance: none;
/* Firefox */
    background: -moz-linear-gradient(
        top,
        #007aff,
        #007aff
        );
    -moz-box-shadow: 0;

/* IE */
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#007aff,endColorstr=#007aff);
    zoom: 1;
    margin: 0 20px;
}

#formBody .return {
	display: inline-block;
	border:none;
	padding: 4px 30px;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	background: #61e78a;
	margin: 0 20px;

/* Webkit */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#61e78a),
        to(#61e78a)
        );
    -webkit-box-shadow: 0;
    -webkit-appearance: none;

/* Firefox */
    background: -moz-linear-gradient(
        top,
        #61e78a,
        #61e78a
        );
    -moz-box-shadow: 0;

/* IE */
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#61e78a,endColorstr=#61e78a);
    zoom: 1;
}

/*radio checkboxのカスタマイズ*/
#formBody input[type="radio"],
#formBody input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin-right: 5px;
	margin-left: 10px;
}

/*汎用クラス*/

#formBody .inputNote {
	text-indent: 1em;
	line-height: 1.5;
	font-size: 12px;
}

#formBody .error {
	display: block;
	margin-bottom: 5px;
	line-height: 21px;
	color: #e60012;
}

#formBody .short[type="text"] {
	width: 500px;
}

#formBody .x-short[type="text"]{
	width: 300px;
}

#formBody .xx-short[type="text"]{
	width: 50px;
}


#formBody .result {
	text-indent: 30px;
	font-size: 16px;
	font-weight: bold;
}

#formBody .bt1{
	display: inline-block;
	padding: 10px 20px;
	width: 70%;
	text-align: center;
	font-size: 16px;
	color: #8a8a8a;
	cursor: pointer;
	background: none;
	border: 1px #8a8a8a solid;
	margin-bottom: 10px;
}

.red{
	color: #e60012;
}

.alignC{
	text-align: center;
}

.alignR{
	text-align: right;
}

#formBody #datetime-time,
#formBody #datetime-day,
#formBody #datetime-month,
#formBody #datetime-year{
	font-size: 20px;
}

.box {
	display: box;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}

#formBody .width60 {
	width: 60%;
}

#formBody .width55 {
	width: 55%;
}

#formBody .width50 {
	width: 50%;
}

#formBody .width40 {
	width: 40%;
}

#formBody .width25 {
	width: 25%;
}

#formBody .width20 {
	width: 20%;
}

#formBody .width30 {
	width: 30%;
}

#formBody .width10 {
	width: 10%;
}