@charset "UTF-8";
/* CSS Document */
/* Reset.css */
body {
  -webkit-text-size-adjust: 100%;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	box-sizing: border-box;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{vertical-align: bottom;}

/* --------------------------------------------- */
html,body{
width: 100%;
height:100lvh;
height: 100svh;
height: calc(var(--vh, 1vh) * 100);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.wrap{
  display: flex;
  flex-direction: column;
  height:100lvh;
  height: 100svh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  
  background-image:    
    url("../img/logo-bg.svg"),
    url("../img/top-logoimg.svg"); 
    
  background-color:#f8f7e9;
  
  background-repeat: 
    no-repeat,
    no-repeat;
    
  background-size: 
    auto auto, /* Image 2: */
    80px auto; /* Image 1: */
    
  /* 画像ごとの位置設定 (Image 2, Image 1 の順) */
  background-position: 
    calc(100% + 15vw) center, /* Image 2: 右端から15vw内側 (右寄り)、上下中央 */
    center center; /* Image 1: 上下左右中央 */
}
.wrap::before{
content:'';
position: absolute;
top:0;
left:0;
width: 100%;
height: 58vh;
background-size: 100%;
background:url("../img/bk-wave_pc.png") no-repeat center bottom; 
mix-blend-mode:multiply;
z-index:-1;
}


.up-area,.down-area{
flex:1;
display:flex;
flex-direction: column;
}

header{
width: 100%;
height: auto;
}
h1{
width: 280px;
height: auto;
margin:.8em 0 0 .8em;
}
footer{
width: 100%;
text-align: center;
padding-block:2em;
line-height: 1.4;
}
footer p{font-size: .85em;}

.up-area > h2, .down-area > h2{
flex:1;
display:flex;
justify-content: center;
align-items: center;
}

.up-area > h2 > a, .down-area > h2 > a{
text-decoration: none;
padding: 3em 8em;
display: block;
}

.up-area > h2 > a img, .down-area > h2 > a img{
width: 20vw;
max-width: 100%;
height: auto;
display: block;
}

.up-area > h2 > a img{
margin-bottom:5em;
}
/* HP出来るまではリンク無効 
.down-area > h2 > a{pointer-events: none;}
*/

@media (max-width: 767px) {
.wrap{
  display: flex;
  flex-direction: column;
  height: 100svh;
  height: calc(var(--vh, 1vh) * 100);
  
  background-image:    
    url("../img/logo-bg.svg"),
    url("../img/top-logoimg.svg"); 

  /*background-color:#f8f3ed;/*beige*/
  background-color:#f8f7e9;
  
  background-repeat: 
    no-repeat,
    no-repeat;
    
  background-size: 
    110% auto, /* Image 2: */
    80px auto; /* Image 1: */
    
  /* 画像ごとの位置設定 (Image 2, Image 1 の順) */
  background-position: 
    calc(100% + 25vw) center, /* Image 2: 右端から15vw内側 (右寄り)、上下中央 */
    center center; /* Image 1: 上下左右中央 */
}
.wrap::before{
content:'';
position: absolute;
top:0;
left:0;
width: 100%;
height: 50vh;
background:url("../img/bk-wave_sp.png") no-repeat center bottom; 
background-size: 100%;
mix-blend-mode:multiply;
z-index:-1;
}

footer{line-height: 1.2;padding-block:.8em;}
.up-area{flex:1.2;}
.down-area{flex:0.8;}

h1{width: 40vw;}
h1 img{width: 100%;}

.up-area > h2 > a img, .down-area > h2 > a img{
width: 60vw;
}
.up-area > h2 > a, .down-area > h2 > a{
padding: 2em;
}

}/* end.max-width:767 */

@media (min-width:768px){
.pc-none{display: none;}
}/* end.min-width:768 */