@charset "UTF-8";
/* すべての要素に適用 */
* {
box-sizing: border-box;
}


/* ボディの設定 */
body {
position: relative;
margin: 0;
background: #f5f5f5;
display: grid;
grid-template-columns:
[left] 20px [main] 1fr [end] 20px [right];
grid-template-rows:
[header] auto [main] auto [aside] auto [footer] auto [bottom];
}

/* ヘッダー */
header {
position: relative;
grid-column-start: left;
grid-column-end: right;
grid-row-start: header;
grid-row-end: main;
margin-bottom: 100px;
}
header img {
display: block;
width: 100%;
max-height: 100vh;
}
.top-title {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,50px);
width: 500px;
height: 500px;
background: rgba(255,255,255,.5);
font-size: 50px;
}


/*ヘッダーの固定*/
margin: 0px; /* bodyの外側の余白を指定する */
padding: 0px /* 10px 50px 10px; bodyの内側余白を指定する(上:右:下:左) */
;
}
.Header{
position: fixed; /* ヘッダーを固定する */
top: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* ヘッダーの横幅を指定する */
height: 35px; /* ヘッダーの高さを指定する */
padding: 15px; /* ヘッダーの余白を指定する(上下左右) */
background-color: #31a9ee; /* ヘッダーの背景色を指定する */
color: #000000; /* フォントの色を指定する */
}
.Contents{
	width: 100%; /* コンテンツの横幅を指定する */
overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
}













/*-------------フッターー-------------*/


#footer {
  position: relative;
  margin-top: 0px;
  color: #ffffff;

  background: #000;
  margin: 0px;
  padding: 0px;
}
#footer a {
  text-decoration: none;
  color: #ffffff;
}
#footer a:hover {
  text-decoration: underline;
}
#footer .primary {
  padding: 40px 20px;
  background: #ffe4e1;
}
#footer .secondary {
  display: flex;
  padding: 40px 20px;
  background: #ffe4e1;
}

@media screen and (max-width: 767px) {
  #footer .primary {
    padding: 20px 20px;
    background: #fac5c3;
  }
  #footer .secondary {
    display: block;
    padding: 20px 20px;
  }
}

/* footer-logo */

#footer .logo {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 26px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #footer .logo {
    font-size: 16px;
  }
}

/* address */

.address {
  margin: 10px 0 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .address {
    font-size: 12px;
  }
}

/* navi */

.navi-row {
  display: flex;
  margin-top: 40px;
}
#footer .navi {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .navi li {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
}
#footer .navi li:first-child {
  margin-left: 0;
}

@media screen and (max-width: 767px) {
  .navi-row {
    display: block;
    margin-top: 15px;
  }
  #footer .navi {
    font-size: 12px;
  }
  #footer .navi li {
    margin-top: 5px;
    font-size: 12px;
  }
}

/* sns-navi */

#footer .sns-navi {
  margin: 0 0 0 auto;
  padding: 0;
}
#footer .sns-navi li {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
  font-size: 20px;
}
#footer .sns-navi li:last-child {
  margin-right: 0;
}

@media screen and (max-width: 370px) {
  #footer .sns-navi {
    margin: 20px 0 0;
    padding: 0;
  }
  #footer .sns-navi li {
    margin: 0 20px 0 0;
    padding: 0;
    font-size: 18px;
  }
}

/* sitenavi */

#footer .sitenavi {
  width: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .sitenavi li {
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0;
}
#footer .sitenavi li:first-child {
  margin-left: 0;
}

@media screen and (max-width: 767px) {
  #footer .sitenavi {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
}

/* copyright */

#footer .copyright {
  width: 50%;
  margin: 0;
  padding: 0;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #footer .copyright {
    width: 100%;
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
  }
}

body {
  margin: 0;
  padding: 0;
}



/*=========ページを読み込み時にふわっとさせる ===============*/
  body {
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }







=====サイトを開いた時にロゴがふわっとフェードインする ===============*/
.logo_fadein{
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
}
.logo_fadein p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}


/*=========スクロールで文字が下からフェードイン ===============*/




div.animation_box {
  padding: 10px;
  opacity: 0;
  transform: translateY(-20px);
  transition: 5s ease;
}
/* =========スクロールで文字が右からスライドインのcss =============== */


.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text{
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  font-size: 10vw;


  animation-name: clip-text;
  color: #FFF;
  white-space: nowrap;
  cursor: default;
  
  &::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f98b;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
  }
  
}


@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


@keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 0 50%;
  }
  
  60%, 100% {
    transform-origin: 100% 50%;   
  }

  
  60% {
    transform: scaleX(1);
  }
  
  100% {
    transform: scaleX(0);
  }
}


@use postcss-preset-env {
  stage: 0;
  browsers: [
    "last 1 Chrome versions",
    "last 1 Firefox versions",
    "last 1 Safari versions",
    "last 1 Edge versions"
  ]
}

/*=========トップへのボタン ===============*/

/*----- スムーズスクロール -----*/
.back-top {
	position: fixed; /* 要素固定*/
	bottom: 3%; /*下からの位置*/
	right: 5%; /*右からの位置*/
	display: none; /*初めは非表示*/
	width: 80px;
	height: 80px;
	background-color: #ffc0cb;
	border-radius: 100%;
}
.back-top a{
	color: #fff;
	text-decoration: none;
	text-align: center;
	display: block;
	line-height: 80px;
}

	 















/*========= 光りながら出現させるためレイアウトのCSS ===============*/
/*========= レイアウトのためのCSS ===============*/
body{
  background:#333;
}
p{
  text-align: center;
  margin: 20px 0;
  font-size:1.5rem;
  color: #fff;
}


/*========= 光りながら出現させるためのCSS ===============*/

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
  100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}






/*=========うさぎのローディングアニメーション ロゴマークを表示させる土台を用意===============*/

#logo_loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 101;
    background-color: #ffe4e1;
}
#logo_loader .f_logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 160px;
    height: 250px;
    text-align: center;
    color: #ffe4e1;
    font-size: 30px;
}
#logo_loader .f_logo img {
    width: 100%;
    height: auto;
}
/*=========ロゴマークをアニメーションさせる ===============*/

#logo_loader .f_logo:before {
    content: "";
    display: block;
    width: 100%;
    height: 110%;
    background-color: #ffe4e1;
    position: absolute;
    top: 0;
    left: 100%;
    animation: loadLogo 2.5s;
}


@keyframes loadLogo {
  0% {
    left: 0;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}


#logo_loader .f_logo:before {
    animation: loadLogo 2.5s;
}

/*=========ファーストビューを表示させるためのアニメーション ===============*/
#logo_loader.open {
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 3s;
    animation-delay: 3s;
}

@keyframes slideOut {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}







/*=========ふわっとさせたい ===============*

.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}




/*=========スクロールでふわっと表示画像 ===============*/

.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}





/*=========自動でふわっと切り替わる画像のCSSネットコピー ===============*/

#photo{
    width: 500px;
    height: 300px;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
    position: relative;
}

#photo img{
    top: 0;
    left: 0;
    position: absolute;
}


/*=========自動でふわっと切り替わる画像のCSS上記書き換え ===============*/
.photo{
    width: 100%;
    height: 500px;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
    position: relative;
}

.photo img{
    top: 0;
    left: 0;
    position: absolute;
}





/*=========白ロゴlife　partnerのCSS ===============*/
body {
 
  background: #fbf9f4;
  text-align: center;
}

h3 {
  /* margin: 20px; */
  font-family: "Paytone One";
  color: #202020;
  text-transform: uppercase;
  letter-spacing: -2px;
}

h3 span {
  display: block;
  margin: 11px 0 17px 0;
  font-size: 60px;
  line-height: 50px;
  color: #ffe6e9;
  text-shadow: 0 10.20px 5.896px #c4b59d,0 -1px 1px #fff;
  letter-spacing: -4px;
}



/*=========消えるトップロゴlife　partnerのCSS ===============*/
body {

background: #292929;
  text-align: center;
}

h4 {
  /* margin: 20px; */
  font-family: "Paytone One";
  color: #202020;
  text-transform: uppercase;
  letter-spacing: -2px;
}

h4 span {
  display: block;
  margin: 11px 0 17px 0;
  font-size: 80px;
  line-height: 80px;
  color: #c0c0c0;
  text-shadow: 0 13.36px 8.896px #c4b59d,0 -2px 1px #fff;
  letter-spacing: -4px;
}



/*=========画面縮小で画像も縮小するcss===============*/

.img100{
    max-width: 100%;
    height: auto;
}

.img{
    max-width: 50%;
    height: auto;
}



/*========CUTなどのグレーの文字===============*/
.relative{
    position: relative;
    width: 600px;
}
.absolute{
    position: absolute;
    bottom: 80px;
    color: #fff;
    background: rgba(0,0,0,.6);
    width: 100%;
    max-width: 600px;
    padding: 1em 0;
}
.absolute p{
    margin: 0;
    padding: 0 0.8em;
    font-size: 150%;
    text-align: center;
}



.size_test{
    font-size:  1.5rem;    /* 文字サイズ指定 */
}
.size_test2 {
    font-size:  6vmax;    /* 文字サイズ指定 */
}






/*=========trimmingなどグレーで大きなタイトルのcss ===============*/

:root {
  --delay: 0;
  --duration: 800ms;
  --iterations: 1;
}


/*=========トップぺージボタン ===============*/

h2{
  text-align: center;
  margin-bottom: 30px;
}
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 50px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



/*=========文字の回り込み ===============*/
ul{
display:flex;
flex-wrap:no-wrap;/* 改行不許可 */
}

/*必要に応じて*/
li{
width:25%;
} 


/*=========文字の回り込み ===============*/
.section06 .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.section06 img {
  display: block;
  width: 48%;
  height: auto;
}

.section06 .box {
  width: 48%;
}
.wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.wrap:not(:last-child) {
  margin-bottom: 80px;
}

.wrap:nth-child(even) {
  flex-direction: row-reverse;
}

img {
  display: block;
  width: 48%;
  height: auto;
}

.box {
  width: 48%;
}



/*=========画像を横に並べ画面が小さくなると折り返すCSS ===============*/
.yokonarabi5{
    display:flex;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
}
@media(max-width:750px){
    .yokonarabi5{
        flex-wrap: wrap;
    }
    .yokonarabi5 >div{
        width: 50%;
    }
}











/* tapナビゲーション */
nav {
position: absolute;
top: 0;
left: 0;
right: 0;
}
nav ul {
display: flex;
background: rgba(255,255,255,.7);
margin: 0;
list-style: none;
padding: 0;
font-size: 1.2rem;
}
nav li {
text-align: center;
padding: 10px 0;
width: 200px;
cursor: pointer;
transition: all 1s;
}
nav li:hover {
background: white;
}
/* ナビゲーションモバイル版 */
nav.open {
display: block;
}
/* メディアクエリ */
@media (max-width:840px) {
nav {
position: fixed;
display: none;
}
nav ul {
flex-direction: column;
height: 100vh;
padding-top: 40px;
background: rgba(255,255,255,.9);
}
nav li {
width: 100%;
padding: 20px;
}
}











.plan {
display: flex;
width: 100%;
max-width: 1600px;
margin: 2em auto;
}
.plan img {
display: block;
width: 100%;

}
.plan h2 {
font-size: 20px;
color: black;
}
.plan .comments {
width: 100%;
max-width: 700px;
padding: 0 20px;
background: #cccccc;
text-align: left;
}
@media (max-width: 700px) {
.plan {
flex-direction: column;
}
.plan img {
width: 100%;
height: auto;
}
.xdhh .comments {
padding: 20px;
}
}
/* サイド */
aside {
grid-column-start: main;
grid-column-end: end;
grid-row-start: aside;
grid-row-end: footer;
}
.news {
max-width: 1000px;
border-top: dashed 1px #cccccc;
border-bottom: dashed 1px #cccccc;
margin: 2em auto;
padding: 1em 20px;
color: white;
}
.news .topic {
display: flex;
align-items: center;
padding: 10px;
margin: 1em 0;
border-left: solid 10px #cccccc;
}
.news .time {
margin-right: 1em;
}
@media (max-width: 450px) {
.news .topic {
flex-direction: column;
align-items: flex-start;
}
}
/* フッター */
footer {
grid-column-start: left;
grid-column-end: right;
grid-row-start: footer;
grid-row-end: bottom;
text-align: center;
background: white;
padding: 10px 0;
}














/* メニューボタン */

.menubutton {
position: fixed;
top: 0;
right: 0;
cursor: pointer;
z-index: 100;
width: 40px;
height: 40px;
padding: 5px;
background:  transparent;
display: none;
}
.menubutton i {
display: block;
width: 30px;
height: 5px;
background: white;
margin-bottom: 7.5px;
}
.menubutton i:last-child {
margin-bottom: 0;
}
/*三本線メニューボタン*/
.menubutton {
position:fixed;
  z-index: 100;/*ボタンを最前面に*/
  top:0px;
  right: 10px;
  cursor: pointer;
  z-index: 9999;
    width: 40px;
    height:40px;
display: none;
}

/*×に変化*/  
.menubutton span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    z-index: 9999;/*ボタンを最前面に*/
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #666;
    width: 45%;
  }

.menubutton span:nth-of-type(1) {
  top:15px; 
}

.menubutton span:nth-of-type(2) {
  top:23px;
}

.menubutton span:nth-of-type(3) {
  top:31px;
}

.menubutton.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.menubutton.active span:nth-of-type(2) {
  opacity: 0;
}

.menubutton.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}


.menubutton i {
display: block;
width: 30px;
height: 5px;
background: #c0c0c0;
margin-bottom: 7.5px;
}

/* メディアクエリ */
@media (max-width:840px) {
.menubutton {
display: block;
}
}
/* メイン */
main {
grid-column-start: main;
grid-column-end: end;
grid-row-start: main;
grid-row-end: aside;
margin-bottom: 100px;
}
h1,h2 {
color: white;
text-align: center;
}





/* 線中央文字*/
hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}