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

body {
	font-size: 12px;
	font-family: "メイリオ", Meiryo, sans-serif;
}

.svgs {
	display: none;
}

a {
	text-decoration: none;
}
.container {
	width: 960px;
	margin: auto;
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/*header {
	padding: 10px;
}
*/
header .logo {
	width: 15%;
}

header .logo img, footer .logo img {
	width: 100%;
	height: auto;
}

/*header nav {
	margin-top: 20px;
}*/

header nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;	
	-webkit-box-pack: justify;	
	    -ms-flex-pack: justify;	
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

header nav ul a {
	font-family: "小塚ゴシック Pr6N";
	font-size: 12px;
	color: black;
	text-align: center;
}

header nav ul li .sub {
	display: none;
}

header nav ul li:hover .sub {
	display: block;
}

header nav ul li {
	position: relative;
	-webkit-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
	margin-left: 20px;
	z-index: 35;
	
	height: 70px;
    line-height: 70px;
}

header nav > ul > li:hover {
	transform: translate(0, -10px);
}

header nav>ul>li > a {
	padding-bottom: 10px;
	border-bottom: 3px solid rgba(247,147,30,0);
	-webkit-transition: all 1000ms ease-out;
	-o-transition: all 1000ms ease-out;
	transition: all 1000ms ease-out;
	
	width: 100%;
    height: 100%;
    display: block;
    position: relative;
    padding-bottom: 0;
}

/*header nav>ul>li:hover > a {
	border-bottom: 3px solid rgba(247,147,30,1);
}*/
header nav>ul>li>a:hover > .ja {
	border-bottom: 3px solid rgba(247,147,30,1);
}
header nav ul li .ja {
	padding-top: 10px;
    display: block;
	height: 70%;
	border-bottom: 3px solid rgba(247,147,30,0);
	transition: all 500ms ease-in-out;
}

header nav ul li .en {
	text-transform: uppercase;
	font-family: 'Playfair Display', serif;
    position: absolute;
    top: -15px;
    font-size: 10px;
    width: 100%;
	
	top: -0.5em;
    left: 0;
}

header nav ul li ul {
	position: absolute;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	margin-top: -14px;
	width: 100px;
    margin-left: -50px;
    left: 50%;
	z-index: 35;
	/*transition: border-top 5000ms ease-out;*/
}

/*header nav ul li:nth-child(3) ul {
	width: 100%;
}
header nav ul li:nth-child(4) ul {
	width: 150%;
}*/

header nav ul li ul li {
	width: 100%;
	height: 40px;
	background-color: rgba(252,217,173,0.8);
	line-height: 40px;
	margin-top: 1px;
	margin-left: 0;
    text-align: center;
	opacity: 0;
	-webkit-transform-origin: top center;
	    -ms-transform-origin: top center;
	        transform-origin: top center;
}

header nav ul li ul li:hover {
	background-color: rgba(247,147,30,0.8);
}

header nav ul li ul li a {
    width: 100%;
    height: 100%;
    display: block;
}

header nav ul li:hover > ul {
	-webkit-perspective: 1000px;
	        perspective: 1000px;
	border-top: 3px solid rgba(247,147,30,1);
}

header nav ul li:hover > ul li:nth-child(1) {
  -webkit-animation: menu2 400ms ease-in-out forwards 100ms;
          animation: menu2 400ms ease-in-out forwards 100ms;
}
header nav ul li:hover > ul li:nth-child(2) {
  -webkit-animation: menu2 400ms ease-in-out forwards 200ms;
          animation: menu2 400ms ease-in-out forwards 200ms;
}
header nav ul li:hover > ul li:nth-child(3) {
  -webkit-animation: menu2 400ms ease-in-out forwards 300ms;
          animation: menu2 400ms ease-in-out forwards 300ms;
}

header nav ul li:hover > ul li:nth-child(4) {
  -webkit-animation: menu2 400ms ease-in-out forwards 400ms;
          animation: menu2 400ms ease-in-out forwards 400ms;
}

@-webkit-keyframes menu2 {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  70% {
    -webkit-transform: rotateX(50deg);
            transform: rotateX(50deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}


@keyframes menu2 {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  70% {
    -webkit-transform: rotateX(50deg);
            transform: rotateX(50deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
}

/*mainの設定*/


h1 {
	margin: 80px 0 45px;
	text-align: center;
	font-family: "小塚ゴシック Pr6N";
	font-size: 70px;
	position: relative;
	font-weight: 100;
}

h1 .en {
	color: #b3b3b3;
	font-size: 50px;
	display: block;
	position: absolute;
	top: -1em;
	width: 100%;
	left: 50%;
	margin-left: -50%;
	font-family: 'Playfair Display', serif;
	font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
	color: rgba(247,147,30,1);
}

p {	
	line-height: 180%;
}

.overall {
	padding: 0 20px;
	position: relative;
}


.date {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 14px;
}

.controls-wrap {
	width: 200px;
	margin: auto;
	display: flex;
	justify-content: space-between;
}

.prev-box,
.next-box {
	margin: 50px 0 30px;
/*		margin: 50px 0 30px 50%;*/
	padding: 0 10px;	
    position: relative;
	text-align: right;
	width: 70px;
}

/*.next-box {
	margin-left: calc(50% - 100px);
}*/

.prev-box p,
.next-box p {	
	line-height: 90%;
}

.prev-box a,
.next-box a {
	color: inherit;
}

.prev-box span,
.next-box span {
    height: 1px;
    width: 20px;
    background-color: black;
    display: block;
    position: absolute;
    left: 90px;
    margin-top: -9px;
}
 .mark {
	 position: relative;
	 transform: translateY(-13px);
 }
 
.next-box .mark {
	transform: translateY(-16px) translateX(30px) rotate(180deg);
}

.prev-box .down,
.next-box .down {
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	top: 50%;
}

.prev-box .up,
.next-box .up {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    top: calc(50% + 14px);
}

.prev-box .en,
.next-box .en {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 20px;
}

.prev-box .ja,
.next-box .ja {
	font-size: 11px;
	width: 70px;
}


main > section:after {
	content: "";
	display: block;
	height: 3px;
	width: 25%;
	background: rgba(247,147,30,1);
	margin: 50px auto 30px;
}

.contacts {
	width: 440px;
	margin: 15px auto;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.contacts .social {
	color: transparent;
	line-height: 0;
}

.contacts .social li a {
	font-size: 0 !important;
}

.contacts .social svg {
	padding-left: 10px;
	-webkit-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

.contacts .social svg:hover {
	-webkit-transform: scale(1.5);
	    -ms-transform: scale(1.5);
	        transform: scale(1.5);
}

.contacts .phone {
	display: -ms-grid;
	display: grid;
    grid-column-gap: 5px;
    -ms-grid-columns: min-content 1fr;
        grid-template-columns: -webkit-min-content 1fr;
        grid-template-columns: min-content 1fr;
	text-align: center;
	padding: 25px 15px;
	-webkit-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

.contacts .phone:hover {
	-webkit-box-shadow: 0px 2px 12px 2px #ddd;
	        box-shadow: 0px 2px 12px 2px #ddd;
}

.contacts .phone svg {
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	grid-row: 1/3;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

.contacts .phone p:last-child {
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-column: 2/3;
}

.contacts .phone p:last-child a {
	color: inherit;	
    font-weight: bold;
}
	
.totop {
	position: fixed;
	bottom: 45px;
	right: 15px;
	z-index: 30;
	-webkit-filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
	        filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
}

.totop:hover {
	-webkit-animation: bounce 0.8s linear infinite;
	        animation: bounce 0.8s linear infinite;
}

@-webkit-keyframes bounce {
	0%, 100% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	30% {
		-webkit-transform: translateY(-10px);
		        transform: translateY(-10px);
	}
	60% {
		-webkit-transform: translateY(10px);
		        transform: translateY(10px);
	}
}

@keyframes bounce {
	0%, 100% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	30% {
		-webkit-transform: translateY(-10px);
		        transform: translateY(-10px);
	}
	60% {
		-webkit-transform: translateY(10px);
		        transform: translateY(10px);
	}
}

/*mainの設定終わり*/

footer {
	background-color: rgba(247,147,30,0.3);
}


footer .logo {
	width: 15%;
	margin-top: 30px;
}

footer .flex {
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

footer .list {
	margin: 30px 100px 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* align-items: flex-start; */
    width: 60%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    /* box-sizing: border-box; */
}

footer 	ul li a {
	font-family: "小塚ゴシック Pr6N";
	font-size: 10px;
	color: black;
	line-height: 20px;
}

footer p {
	font-size: 10px;
	color: white;
	text-align: center;
	line-height: 35px;
	background-color: rgba(247,147,30,1);
}

.sp-menu-toggle {
	display: none;
}


/*----loader--------*/
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #f7931e;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

/*-----scrollin------*/
.fadein {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 1s;
    transition: all 1s;
}

.fadein.scrollin {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

@media (max-width:990px) {
	.container {
    	width: auto;
	}
}

@media (max-width:840px) {
	html,
	body {
		overflow-x: hidden;
	}
	
	header {
		padding: 10px;
	}
	
	header .flex {
		position: relative
	}
	
	header .logo {
		width: 25%;
	}	
	
	header nav {
		position: absolute;
		top: 60px;
		right: -10px;
		width: 0;
		max-width: 90%;
		background: rgba(255,255,255,1);
		z-index: 100;
		padding: 20px 0;
		-webkit-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		        transform: translateX(100%);
	    /*<!--display: none;-->*/
	    overflow: hidden;
	}
	
	header .open {
		/*transform: translateX(0%);	
		opacity: 1;*/
		-webkit-animation: slideIn 500ms ease-in-out forwards;
		        animation: slideIn 500ms ease-in-out forwards;
	}
	
	
	@-webkit-keyframes slideIn {
		0% {
			opacity: 0;
			-webkit-transform: translateX(100%);
			        transform: translateX(100%);
			width: 0;
		}
		50% {
			opacity: 0;
		}
		100% {
			-webkit-transform: translateX(0%);
			        transform: translateX(0%);	
			opacity: 1;
			width: 400px;
		}
	}
	
	
	@keyframes slideIn {
		0% {
			opacity: 0;
			-webkit-transform: translateX(100%);
			        transform: translateX(100%);
			width: 0;
		}
		50% {
			opacity: 0;
		}
		100% {
			-webkit-transform: translateX(0%);
			        transform: translateX(0%);	
			opacity: 1;
			width: 400px;
		}
	}
	
	header nav ul {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	
	header nav ul li {
	    margin: 10px 0 0 20px;
		height: 100%;
	}
	
	header nav ul a {
		text-align: left;
		font-size: 4vw;
		margin: 0;
		display: block;
		width: 100%;
		height: 40px;
	}
	
	header nav ul li .en {
		display: none;
	}
	
	
	header nav ul li .sub {
		display: block;
	}
	
	header nav ul li ul {
	    width: auto;
		position: static;
		margin-left: 0;		
   		margin-top: 0px;
	}
	
	header nav ul li ul li {
	    width: auto;
		opacity: 1;
		background-color: rgba(0,0,0,0.2);
		padding: 5px 0 5px 15px;
		margin-bottom: 10px;
    	margin-top: 10px;
	}
	
	header nav>ul>li > a {
		border-bottom: none;
		padding-bottom: 0;
		line-height: 40px;
	}

/*	--------hovers----*/	
	header nav ul li:hover .sub {
	display: block;
}

header nav>ul>li:hover > a {
	border-bottom: none;
}

header nav ul li ul li:hover {
	background-color: rgba(247,147,30,0.8);
}


header nav ul li:hover > ul {
	border-top: none;
}

header nav ul li:hover > ul li:nth-child(1),
header nav ul li:hover > ul li:nth-child(2),
header nav ul li:hover > ul li:nth-child(3),
header nav ul li:hover > ul li:nth-child(4)	{
  -webkit-animation: none;
          animation: none;
}

	
	header nav > ul > li:hover {
    	transform: translate(0, 0);
	}
	
	header nav ul li:hover > ul {
		border: none;
	}
	
	header nav>ul>li>a:hover > .ja {
		border-bottom: none;
	}
	
	header nav ul li .ja {
		padding-top: 0;
		border-bottom: none;
	}

/*	--------hovers end----*/


	.sp-menu-toggle {
		display: block;
		width: 50px;
		height: 50px;
		background: rgba(247,147,30,1);
		margin-right: 10px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		padding: 6px 0;
	}
	
	.sp-menu-toggle .menu-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.sp-menu-toggle .menu-wrap span {
		height: 2px;
		width: 36px;
		background: white;
		display: block;
	}
	
	.xmenu .menu-wrap {
		-webkit-animation: xmenu-0 300ms ease-out forwards;
		        animation: xmenu-0 300ms ease-out forwards;
	}	
	
	.xmenu .line-2 {
		-webkit-animation: xmenu-2 300ms ease-out forwards;
		        animation: xmenu-2 300ms ease-out forwards;
	} 
	.xmenu .line-1 {
		-webkit-animation: xmenu-1 300ms ease-out forwards;
		        animation: xmenu-1 300ms ease-out forwards;
	}
	.xmenu .line-3 {
		-webkit-animation: xmenu-3 300ms ease-out forwards;
		        animation: xmenu-3 300ms ease-out forwards;
	}
	
	@-webkit-keyframes xmenu-0 {
		0%{
			-webkit-transform: translateX(0);
			        transform: translateX(0);
		}
		100% {
			-webkit-transform: translateX(-2px);
			        transform: translateX(-2px);
		}
	}
	
	@keyframes xmenu-0 {
		0%{
			-webkit-transform: translateX(0);
			        transform: translateX(0);
		}
		100% {
			-webkit-transform: translateX(-2px);
			        transform: translateX(-2px);
		}
	}
	
	@-webkit-keyframes xmenu-1 {
		0%{
			-webkit-transform: rotate(0deg);
			        transform: rotate(0deg);
			/*margin-top: 0;*/
		}
		100% {
			-webkit-transform: rotate(45deg) translate(6px,-5px);
			        transform: rotate(45deg) translate(6px,-5px);
			-webkit-transform-origin: top left;
			        transform-origin: top left;
			/*margin-top: -6px;*/
		}
	}
	
	@keyframes xmenu-1 {
		0%{
			-webkit-transform: rotate(0deg);
			        transform: rotate(0deg);
			/*margin-top: 0;*/
		}
		100% {
			-webkit-transform: rotate(45deg) translate(6px,-5px);
			        transform: rotate(45deg) translate(6px,-5px);
			-webkit-transform-origin: top left;
			        transform-origin: top left;
			/*margin-top: -6px;*/
		}
	}
		@-webkit-keyframes xmenu-2 {
		0%{
			opacity: 1;
		}
		100% {
			opacity: 0;
			-webkit-transform-origin: center right;
			        transform-origin: center right;
		}
	}
		@keyframes xmenu-2 {
		0%{
			opacity: 1;
		}
		100% {
			opacity: 0;
			-webkit-transform-origin: center right;
			        transform-origin: center right;
		}
	}
	
	@-webkit-keyframes xmenu-3 {
		0%{
			-webkit-transform: rotate(0deg);
			        transform: rotate(0deg);
			/*margin-top: 0;*/
		}
		100% {
			-webkit-transform: rotate(-45deg) translate(6px,6px);
			        transform: rotate(-45deg) translate(6px,6px);
			-webkit-transform-origin: bottom left;
			        transform-origin: bottom left;
			/*margin-top: 6px;*/
		}
	}
	
	@keyframes xmenu-3 {
		0%{
			-webkit-transform: rotate(0deg);
			        transform: rotate(0deg);
			/*margin-top: 0;*/
		}
		100% {
			-webkit-transform: rotate(-45deg) translate(6px,6px);
			        transform: rotate(-45deg) translate(6px,6px);
			-webkit-transform-origin: bottom left;
			        transform-origin: bottom left;
			/*margin-top: 6px;*/
		}
	}
	
}

@media (max-width:660px) {
	

	footer .logo {
		display: none;
	}
	footer .list {
	margin: 20px auto;
    width: 90%;
	}
	
	.pace .pace-progress {
  background: rgba(247,147,30,0.7)
	}
}


@media (max-width:575px){
	h1 {
		font-size: 10vw;
	}
	h1 .en {
		font-size: 7vw;
	}
}

@media (max-width:460px) {
	
	.contacts {
		width: 90%;
	}
	
}

@media (max-width:420px){
	header .logo {
		width: 40%;
	}
	
	footer .list {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}

@media (max-width:400px){
	.contacts {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	
	.contacts .phone {
		margin-bottom: 20px;
	}
	
	ul li,
	dl,
	p, 
	a {
		font-size: 3vw;
	}
}