/* reset
------------------------------------------------------------------------------*/
.serif {font-family: 'Noto Serif JP', serif;}
html,
input,
textarea,
select,
button {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
}
html {
  color: #231F20;
  background: #fff;
  font-size: 16px;
  line-height: 1.8;
  word-break: break-all;
}
body {
  background: #fff;
  margin: 0;
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
figure {
  margin: 0;
}
img {
  border: 0;
  margin: 0;
  vertical-align: top;
  max-width: 100%;
  width: 100%;
  height: auto;
}
p {
  margin: 0;
  padding: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
a {
  color: #000;
  text-decoration: none;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
select::-ms-expand {
  display: none;
}
textarea {
  resize: vertical;
}
::-webkit-input-placeholder {
  color: #ccc;
}
:-ms-input-placeholder {
  color: #ccc;
}
::-ms-input-placeholder {
  color: #ccc;
}
::-moz-placeholder {
  color: #ccc;
}
::placeholder {
  color: #ccc;
}
button {
  border: none;
  cursor: pointer;
}
label {
  cursor: pointer;
}
table {
  border-collapse: collapse;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
main {
  display: block;
}
.inner-block {
  position: relative;
  max-width: 1366px;
  padding: 0;
  margin: 0 auto;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
section {
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 3%;
    padding-bottom: 5%;
	border-radius: 15px;
}
#wrapper {
  position: relative;
}

dl,
dt,
dd {
  padding: 0;
  margin: 0;
}

/* Responsive
------------------------------------------------------------------------------*/
.mv h2 {
	position: absolute;
	top: 45%;
	left: 30%;
	font-size: clamp(22px, 2vw, 56px);
	letter-spacing: 0.2em;
	line-height: 200%;
}
	.mv h2 span {
		display: inline-block;
		transform: skewX(-25deg);
		padding: 0 .5em;
		background: #fff;
	}
		.mv h2 span span {
			display: inline-block;
			transform: skewX(25deg);
			background: transparent;
		}
.c-box {
    position: fixed;
    right: 5%;
    top: 4%;
    z-index: 120;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;	
    padding: 0.3em 1.5rem;
    color: #fff;
    font-weight: 700;
    text-align: center;
    border-radius: 90px;
    background-image: linear-gradient(90deg,#bca44f 51%,#f0d882 66%,#fef6dc 75%,#fff 83%);
    background-position: 50% 50%;
    background-size: 530% auto;
    transition: all .6s ease-in-out;
    border: 1px solid #bca44f;
	text-align:center;
	letter-spacing: 0.1rem;
}
	.c-box:hover {
	    background-position: 100% 50%;
	    color: #bca44f;
	}
	.c-box a {color: #fff;}
	.c-box a:hover {color: #bca44f;}
	.c-box a span{
		display: block;
		width: 100%;
		font-size: clamp(12px, 2vw, 14px);
	}
.c-btn a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;	
    padding: 0.3em 1.5rem;
    color: #fff;
    font-weight: 700;
	font-size: clamp(16px, 2vw, 20px);
    border-radius: 90px;
    background-image: linear-gradient(90deg,#14463E 51%,#68efda 66%,#dcfefe 75%,#fff 83%);
    background-position: 50% 50%;
    background-size: 530% auto;
    transition: all .6s ease-in-out;
    border: 1px solid #14463E;
	text-align:center;
	letter-spacing: 0.1rem;
}
	.c-btn a:hover {
	    background-position: 100% 50%;
	    color: #14463E;
	}
	.c-btn a {color: #fff;}
	.c-btn a span{
		display: block;
		width: 100%;
		font-size: clamp(12px, 2vw, 14px);
	}
.mv .c-btn a {
    background-image: linear-gradient(90deg,#bca44f 51%,#f0d882 66%,#fef6dc 75%,#fff 83%);
    border: 1px solid #bca44f;
}
	.mv .c-btn a:hover {
	    color: #bca44f;
	}

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
	.box01 {
	    width: 35%;
	    padding: 0;
		order: 0;
	}
	.box02 {
	    width:65%;
	    padding: 0 3%;
		order: 1;
	}
.container h2 {
	margin: 1.0em 0 1.5em 0;
	color: #14463E;
	font-size: clamp(21px, 2.0vw, 48px);
    letter-spacing: 0.2rem;
}
	.container h2 span {
	    display: block;
	    font-size:  clamp(16px, 2vw, 20px);
	    letter-spacing: 0.2em;
	}

.container.about_e-bridal .box02 {
    order: 0;
}
.container.about_e-bridal .box01 {
    order: 1;
}
.tri-box {
    width: 33.3%;
    padding: 3%;
}
	.tri-box h3 {
	    margin: 1em auto 1.5em auto;
	    text-align: center;
	    font-size: 20px;
	    letter-spacing: 0.1em;
	}
.merit .tri-box {
    padding: 0 3%;
}
.situation .imgbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    padding: 20px 1rem;
    background-color: #fff;
    border: solid 1px #b38a59;
    border-radius: 100%;
    color: #b38a59;
    font-size: clamp(16px, 1.0vw + 0.3rem, 30px);
    letter-spacing: 0.05rem;
    text-align: center;
    overflow: hidden;
}
	.situation .imgbox:before {
	    content: "";
	    display: block;
	    padding-bottom: 100%;
	}
 ul.howto {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
}

        ul.howto li {
            position: relative;
            padding: 1rem;
            width: 24%;
        }

        ul.howto li .wrap {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 1rem;
            background-color: #fff;
            border: solid 1px #b38a59;
            border-radius: 100%;
            color: #b38a59;
            font-size: clamp(16px, 1.0vw + 0.3rem, 30px);
            letter-spacing: 0.05rem;
            text-align: center;
        }

        ul.howto li .wrap:before {
            content: "";
            display: block;
            padding-bottom: 100%;
        }

        ul.howto li .wrap span.number {
            position: absolute;
            top: -10%;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            display: inline-block;
            padding: 0 5px;
            color: #b38a59;
            font-size: clamp(36px, 1.5vw + 1.5rem, 60px);
            letter-spacing: -0.05rem;
            text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff
        }

        ul.howto li .wrap img.howtoImg {
            position: absolute;
            bottom: 0;
            width: 35%;
        }
.itemCaution .wrap {
    display: flex;
    justify-content: space-between;
}
	.itemCaution .wrap .box {
		display: block;
	    padding: 1rem;
	    width: 32%;
	    background-color: #EDEFEA;
	}
	.itemCaution h3 {
	    margin-bottom: 1rem;
	    color: #b38a59;
	}
	.itemCaution .wrap .box ul li {
	    margin-left: 1rem;
	    margin-bottom: 1rem;
	    list-style-type: disc;
	    font-size: 13px;
	}
	.itemCaution .wrap .box ul li ul li{
	    margin-bottom: 0rem;
	}

@media screen and (max-width: 1200px) {
  .container {
    width: 95%;
  }
}

@media only screen and (max-width: 900px) {
  body {
    font-size: 16px;
    position: relative;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
  }
  .container {
    width: 93%;
  }

}

	.pc {display: block;}
	.sp {display: none;}
@media all and (max-width: 768px) {
	.pc {display: none;}
	.sp {display: block;}
	body {
	    font-size: 15px;
	}
	.mv h2 {
		top: 45%;
		left: 1%;
	}
	.mv h2 span {
	    padding: 0 0.5em 0 1em;
	}
	.c-box {
	    position: fixed;
	    right: 15%;
	    top: unset;
	    bottom: 4.5%;
	}
	.container h2 {
	    letter-spacing: 0.05rem;
	}
	.box01 {
	    width: 100%;
	    padding: 3% 0;
	}
	.box02 {
	    width:100%;
	    padding: 10% 3%;
	}
	.container.about_e-bridal .box02 {
	    order: 1;
	}
	.container.about_e-bridal .box01 {
	    order: 0;
	}
	.tri-box {
	    width: 100%;
	    padding: 3%;
	}
	.products .box {
	    align-items: flex-start;
	}
		.products .tri-box {
		    width: 50%;
		    padding: 0;
		}
		.products .tri-box h3 {
		    font-size: 14px;
		}
            ul.howto {
                display: block;
            }
            ul.howto li {
                margin-bottom: 1.0rem;
                width: 100%;
            }
            ul.howto li .wrap {
                border-radius: 0;
            }
            ul.howto li .wrap:before {
                display: none;
            }
            ul.howto li .wrap span.number {
                top: 50%;
                left: -5%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
            }
            ul.howto li .wrap img.howtoImg {
                position: absolute;
                bottom: auto;
                right: 0;
                width: 15%;
            }
	.itemCaution .wrap {
	    flex-wrap:wrap;
	}
		.itemCaution .wrap .box {
			margin-bottom: 1.0em;
		    width: 100%;
		}
}

@media all and (max-width: 428px) {

}