@charset "utf-8";

/*■■■■■■■■■■■共通■■■■■■■■■■■*/

body { color: #333333; margin: 0px; padding: 0px; font: 16px "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; background: #FFF;
margin-bottom:0;  background-image: url(../images/bg.webp);
 background-size: contain;
 background-position:middle center;
 background-attachment: scroll;
 background-repeat:repeat;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{ margin: 0px; padding: 0px; }
*, *:before, *:after { box-sizing: border-box; }
ul li{list-style-position:inside;}
ol li{list-style-position:inside;}
.kaigyo:after {content:""; display:block; clear:both;}

.mt30 {margin-top:30px;}

img { max-width: 100%; height: auto; }
span {font-weight:bold;}

main p {margin-bottom:30px; font-size:18px; line-height:1.7em;}
main ul li, main ol li {margin-bottom:8px; line-height:1.5em; font-size:18px;}
main ul, main ol {margin-bottom:20px;}
main ul li {padding-left:0px; margin-left:0px;}

header .logo {text-align:center;}
header .logo img{width:30%; margin-top:10px; filter: drop-shadow(5px 5px 3px #1a1a1a);}


header #header_menu {margin:30px auto 50px; width:100%; text-align:center;}
header #header_menu ul {display:inline-block; }
header #header_menu ul li {float:left; list-style: none; margin:0 20px 0;}
header #header_menu ul li a{text-decoration: none; font-weight:bold; color:#000000;}


footer {text-align:center;}
footer #footer_menu ul {display:inline-block; text-align:center; }
footer nav#footer_menu ul li {float:left; list-style: none; margin:0 20px 0;}
footer nav#footer_menu ul li a{text-decoration: none; font-weight:bold; color:#000000; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;}
footer .copyright_holder {width:100%; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;}

#contents {background-image: url(../images/body_mikaeri_bijin.webp);
background-attachment: scroll;
background-size: 18% auto;
background-position: bottom left;
background-repeat: no-repeat;}


.subpage main {padding:50px 7% 50px; background:#FFFDD0; margin:0 20% 50px;}
.subpage main h1 {font-size:24px; padding: 5px 0 5px; margin:10px 0 30px;}
.subpage main h2 {font-size:22px; padding: 5px 0 5px; background:#FFFDD0; border-bottom:solid 1px #000000; margin:30px 0 30px;}
.subpage main h3 {font-size:20px; padding: 3px 0 3px 10px; border:none; border-left:solid 5px #000000; margin:20px 0 20px;}
.subpage main h4 {font-size:18px;}


/*■プロフィールページ■*/
.about_pg .profile_pic {width:20%; }
.about_pg .profile_name {width:35%; margin-bottom:30px;}
.about_pg table {margin-right:auto; margin-left:auto; }
.about_pg table td{margin-right:auto; margin-left:auto; }

.about_pg table {width: 100%; border-collapse: collapse; border: 1px solid #333;}

.about_pg td { border: 1px solid #333; padding: 8px; vertical-align: top;}


/*■フロントページ■*/

.front_page header { height:100vh; width:100%;
background-image: url(../images/raijin_fujin_bg.webp);
 background-attachment: fixed;
 background-size: 100% 100%;
 background-position:top center;
 background-repeat:no-repeat;
 background-color:#0d161d; position:relative; margin:0; padding:0;}


.front_page main {background:transparent; padding:0; width:100%; }
.front_page main {border: none; }
.front_page main h1{background:transparent; padding:0; margin:0px 35% 0 35%;}
.front_page main h1 img{ filter: drop-shadow(7px 7px 5px #1a1a1a); padding-top:80px;}

.front_page .home_introduction {padding:50px 20% 30px;}
.front_page .home_introduction p{font-weight:bold;}

.front_page #service_upper {
background-image: url(../images/blog_cloud_right.webp);
background-size: 20% auto;
background-position:bottom right;
background-repeat:no-repeat;}
.front_page #service_upper img {height:auto; width:30%; position:top left;}

.front_page .toppage_service_box{padding:0px 5% 60px; background:#FFFDD0; margin:0 20% 50px;}
.front_page .toppage_service_box h2 {text-align:center; background:#FFFDD0; border-bottom:solid 1px #000000; margin:0 15% 30px;}
h2.service_anchor {display:block; padding-top:70px;}
.front_page .toppage_service_box ul {margin-top:30px;}
.front_page .toppage_service_box ul li {padding:5px;}

/*ショートコード新着記事*/
.toppage_newarrival_box {margin:0; margin: 0 25% 50px; padding:5%; border:solid 1px #c1b4a4; background:#FFFFFF;}
.toppage_newarrival_bar {color:#a18861; text-align:center; margin:0 auto 30px; font-family:serif; width:18%;}
.toppage_newarrival_box span {font-weight:normal;}

.toppage_newarrival_to_blog {margin:10px auto 5px; text-align:center;}
.toppage_newarrival_to_blog a {display:block; width:50%; text-align:center; padding:5px; margin:0 auto; color:#FFFFFF; background:#a18861; text-decoration: none; border-radius:4px; border:solid 1px #a28877; box-shadow: 3px 3px #808080;}
.toppage_newarrival_to_blog a:hover { opacity: 0.7; transition: 1.0s;}

#wp-latest-posts {margin-bottom:40px;}
#wp-latest-posts ul li {border-bottom:dotted 1px #a8a8a8; padding-bottom:5px; margin-bottom:5px;}

/*選ばれる理由　外側*/
.front_page .toppage_guidance_box {padding:50px 7% 50px; background:#FFFDD0; margin:0 20% 50px;}
.front_page .toppage_guidance_box h2 {padding: 5px 0 5px; background:#FFFDD0; border-bottom:solid 1px #000000; margin:30px 0 30px;}
.front_page .toppage_guidance_box h3 {padding: 3px 0 3px 10px; border:none; border-left:solid 5px #000000; margin:20px 0 20px;}


/*■■■フロントページのアニメーション■■■*/
.yusuke_logo {display:block;
  position: absolute;
  top: -200px; /* 初期位置：画面外上部 */
  left: 50%;
  transform: translateX(-50%);
  width: 30%; /* 必要に応じて調整 */
  animation: fallToCenter 2.8s ease-out forwards;
}
.yusuke_logo img{ filter: drop-shadow(15px 15px 10px #000000);}

@keyframes fallToCenter {
  to {
    top: 30%;
    transform: translate(-50%, -50%);
  }
}


#toppage_menu {display:block; position: absolute; top:55%;  margin-right:37%; margin-left:37%; 
opacity: 0; /* 初期は非表示 */
animation: menufadeIn 3s ease forwards; /* 2秒かけて表示 */
animation-delay: 2.8s; }
@keyframes menufadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#toppage_menu ul{background:#000000; padding:0; list-style: none; }
#toppage_menu ul li {float:left; width:22%; margin-right:4%; }
#toppage_menu ul li:last-child {margin-right:0; }
#toppage_menu ul li img{ filter: drop-shadow(15px 15px 10px #000000); border-radius:5%;}
#toppage_menu ul li:hover { opacity: 0.7; transition: 1.0s;}

	
.scroll_yajirusi {display:block; width:4%;
      position: absolute;
      top: 78%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: blink 2.0s infinite;
      animation-delay: 6.7s; /* 12秒後に開始 */
    }

.scroll_yajirusi img{ filter: drop-shadow(10px 10px 5px  #000000);}

    /* 点滅アニメーション定義 */
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

/*トップページの画像が降ってくるアニメーションlinear infinite*/
.falling-kyoutu {display:block; position: absolute; height: auto; transform: translateX(-50%); }
.falling-kyoutu img{ filter: drop-shadow(5px 5px 5px #000000);}
.falling-container-daruma {top: -350px; left: 50%; width: 7%; animation: fall-rotate 2.5s ease-in forwards;}
.falling-container-tanuki {top: -350px; left: 15%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 0.5s;}
.falling-container-turu {top: -350px; left: 75%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 1.5s;}
.falling-container-uma {top: -350px; left: 50%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 2s;}
.falling-container-negi {top: -350px; left: 20%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 2.5s;}
.falling-container-hataori {top: -350px; left: 70%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 3s;}
.falling-container-busho {top: -350px; left: 55%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 3.5s;}
.falling-container-yagibusi {top: -350px; left: 15%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 4s; }
.falling-container-jinja {top: -350px; left: 70%; width: 8%; animation: fall-rotate 2.5s ease-in forwards; animation-delay: 4.5s;}

@keyframes fall-rotate {
0% {top: -100px; transform: translateX(-50%) rotate(0deg); }
99% {top: 70vh; opacity: 1; }
100% {top: 70vh; display:none; opacity: 0;/* どの位置で消すか */ transform: translateX(-50%) rotate(540deg); }
}




/*■■■■■■■■■■■スマホ・タブレット用の設定（768px～1020px）■■■■■■■■■■■*/

@media screen and (max-width: 1023px){

main p {font-size:16px;}
main ul li, main ol li {font-size:16px;}

#contents {background-image:none;}

.subpage main {padding:10px 5% 50px; background:#FFFDD0; margin:0 5% 50px;}
.subpage main h1{font-size:24px;}
.subpage main h2{font-size:20px;}
.subpage main h3{font-size:18px;}
.subpage main h4{font-size:16px;}
.subpage main p{font-size:16px;}
.subpage main ul li, .subpage main ol li{font-size:16px;}


header .logo img{width:90%; margin-top:10px; filter: drop-shadow(5px 5px 3px #1a1a1a);}
header #header_menu {margin:10px 0 20px; width:100%; text-align:center; }
header #header_menu ul {width:100%; margin:0 auto; padding:2% 5% 1%; box-sizing: border-box; }
header #header_menu ul li {margin:1% 2% 2% 0%; width:32%;}
header #header_menu ul li:nth-child(3), header #header_menu ul li:nth-child(6) {margin-right:0%;}

header #header_menu ul li a{display:block; font-size:3vw; font-weight:bold; color:#000000; background:#FFFFFF; border:1px solid #000000; border-radius:3px; box-shadow: 3px 3px #808080; padding:5px 0;}





footer {padding:0; margin:0; height:300px; background-image: url(../images/footer_fuji.webp);
background-size: 100% 300px;
background-position:bottom center;
background-repeat:no-repeat; display:block; position: relative; }
footer nav#footer_menu ul {width:100%;}
footer nav#footer_menu ul li {width:50%; margin:0 0 10px;}
footer nav#footer_menu ul li a{font-size:3.3vw;}
footer nav#footer_menu {width:100%; position: absolute; bottom: 40px; margin-right:auto; margin-left:auto;}
footer .copyright_holder {width:100%;  position: absolute; bottom: 15px;}


/*■プロフィールページ■*/
.about_pg .profile_pic {width:30%; }
.about_pg .profile_name {width:40%; }


/*■フロントページ■*/
.front_page header {
background-image:none;
height:100vh; width:100%;
background-image: url(../images/sm_home_bg.webp);
background-position:top center;
background-size: 100% auto;
background-attachment: fixed;
background-repeat:no-repeat, no-repeat;
background-color:#0d161d; }


.front_page main {margin:0; padding:0;}
.front_page main h1{margin:0px 15% 0 15%;}
.front_page main h1 img{padding-top:70px}


.front_page .home_introduction {padding:30px 5% 30px;}

.front_page #service_upper {
background-image: url(../images/blog_cloud_right.webp);
background-size: 30% auto;
background-position:bottom right;
background-repeat:no-repeat;  filter: drop-shadow(5px 5px 5px #000000);
  z-index: -1;}
.front_page #service_upper img {height:auto; width:55%; position:top left; }

.front_page .toppage_service_box{margin-right:5%; margin-left:5%; padding-right:5%; padding-left:5%;}

.front_page .toppage_newarrival_box {margin:0; margin: 10% 5% 15%; padding-bottom:50px;}
.front_page .toppage_newarrival_bar {font-size:6vw;  margin:20px auto 25px; width:35%;}

/*選ばれる理由　外側*/
.front_page .toppage_guidance_box {padding:1px 5% 50px; margin:0 5% 50px;}




/*■■■フロントページのアニメーション■■■*/

/*トップページの画像が降ってくるアニメーションlinear infinite*/
.falling-kyoutu {display:block; position: absolute; height: auto; -webkit-transform: translateX(-50%); }
.falling-kyoutu img{ filter: drop-shadow(5px 5px 5px #000000);}
.falling-container-daruma {top: -100px; left: 50%; width: 34%; animation: fall-rotate 4s ease-in forwards;}
.falling-container-tanuki {top: -300px; left: 15%; width: 30%; animation: fall-rotate 4s ease-in forwards; animation-delay: 0.5s;}
.falling-container-turu {top: -300px; left: 75%; width: 30%; animation: fall-rotate 4s ease-in forwards; animation-delay: 1.5s;}
.falling-container-uma {top: -300px; left: 50%; width: 30%; animation: fall-rotate 4s ease-in forwards; animation-delay: 2s;}
.falling-container-negi {top: -300px; left: 20%; width: 30%; animation: fall-rotate 4s ease-in forwards; animation-delay: 2.5s;}
.falling-container-hataori {top: -300px; left: 70%; width: 38%; animation: fall-rotate 4s ease-in forwards; animation-delay: 3s;}
.falling-container-busho {top: -300px; left: 55%; width: 36%; animation: fall-rotate 4s ease-in forwards; animation-delay: 3.5s;}
.falling-container-yagibusi {top: -300px; left: 15%; width: 36%; animation: fall-rotate 4s ease-in forwards; animation-delay: 4s; }
.falling-container-jinja {top: -300px; left: 70%; width: 36%; animation: fall-rotate 4s ease-in forwards; animation-delay: 4.5s;}

@keyframes fall-rotate {
0% {top: -100px; transform: translateX(-50%) rotate(0deg);}
99% {top: 70vh; opacity: 1; }
100% {top: 70vh; display:none; opacity: 0;/* どの位置で消すか */ transform: translateX(-50%) rotate(540deg); }
}


.yusuke_logo {display:block;
  position: absolute;
  top: -200px; /* 初期位置：画面外上部 */
  left: 50%;
  transform: translateX(-50%);
  width: 70%; /* 必要に応じて調整 */
  animation: fallToCenter 5s ease-out forwards;
}

@keyframes fallToCenter {
  to {
    top: 35%;
    transform: translate(-50%, -50%);
  }
}

#toppage_menu {top:55%;  margin-right:10%; margin-left:10%; animation-delay: 5.0s; }

.scroll_yajirusi {display:block; width:10%;
      position: absolute;
      top: 80%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: blink 2.0s infinite;
      animation-delay: 8.5s; /* 12秒後に開始 */
    }

    /* 点滅アニメーション定義 */
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

}