@charset "utf-8";

/* ===== Theme colors ===== */
:root{
  --main_color:#1976CC;
  --ichiro_color:#009843;
  --king_color:#E5004E;
  --shiro_color:#0067B6;
  --hanako_color:#F18D1A;
  --sms1:#43B236;
  --sms2:#206CB5;
  --sms3:#D04192;
}
*{ box-sizing:border-box; }

/* ===== Base grid ===== */
body{
  margin:0; background:#fff; position:relative; display:grid;
  grid-template-columns:[left] 20px [main] 1fr [end] 20px [right];
  grid-template-rows:[header] auto [nav] auto [nav2] auto [main] auto [footer] auto [bottom];
}

/* ===== Header ===== */
header{ grid-column:left / right; grid-row:header / nav; margin:0; padding:0; }
header ul{
  max-width:1000px; margin:1rem auto 0; padding:0; list-style:none;
  display:flex; align-items:flex-end; justify-content:space-between;
}
header ul li{ display:flex; flex-direction:column; }
.h_logo{ width:90px; margin-right:10px; flex-shrink:0; display:flex; align-items:center; 
	opacity: 0;
  transform: translateX(-40px);  
	animation: fadeInLeft 1s ease-out forwards;
}
@media (max-width:566px){
	.h_logo{
	  transform: translateX(-30px);  
		animation: fadeDown 1s ease-out forwards;
	}	
}
/* ======== keyframes定義 ======== */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.h_logo img{ width:100%; height:auto; display:block; aspect-ratio:3/1; }


.h_title{ margin:0; padding:0; text-align:left;opacity: 0;
  transform: translateX(-40px);
  animation: fadeInLeft 1s ease-out forwards; 
}
@media (max-width:566px){
	.h_title{ margin:0; padding:0; text-align:left;opacity: 0;
	  transform: translateX(-30px);
	  animation: fadeDown 1s ease-out forwards; 
	}	
}


.h_title p{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight:400; font-size:.73rem; color:#333; margin:0; overflow:hidden;
}
.h_title #sms_title{ margin:0 0 -.32rem 0; padding:0; }
.h_title #sms_title a{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight:700; font-size:2rem; color:var(--main_color);
  text-decoration:none; font-feature-settings:"palt"; line-height:1.25;
}

.h_google{ flex:0 0 auto; }
.h_google:empty{ display:none !important; }

.h_sub{
  margin-left:auto; display:flex; flex-direction:column;
  align-items:flex-end; text-align:right;
	opacity: 0;
  transform: translateX(40px);
  animation: fadeInRight 1s ease-out forwards;
  animation-delay: 0.3s; /* 少し遅れて出すと自然 */
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.h_sub p{ margin:0; padding:0; }
.h_sub .tel{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight:bold; font-size:1.58rem; color:var(--sms3); margin-bottom:.5rem; line-height:.8;
}
.btn-gradient-3d-orange{
  display:inline-block; padding:0 1rem; height:36px; line-height:36px;
  color:#fff; background:#F18D1A; border-radius:4px; text-decoration:none; border:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.btn-gradient-3d-orange:hover{
	background:var(--king_color);
}

/* Mobile header adjustments */
@media (max-width:566px){
  header ul{ flex-direction:column; align-items:flex-start; width:100%; }
  .h_logo{ width:30%; margin:0 auto 1rem; }
  .h_title{ width:100%; text-align:center; }
  .h_title p{ font-size:.7rem; margin-bottom:5px; }
  .h_title #sms_title a{ font-size:2.5rem; }
  .h_sub{ display: none; }
}

/* ===== Blue nav (PC only) ===== */
nav{
  grid-column:left / right; grid-row:nav / nav2; background:var(--main_color);
  max-width:1000px; margin:1rem auto 0; width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	/* ====== nav フェードアップ ====== */
	opacity: 0;
  	transform: translateY(30px);
  	animation: fadeUp 0.8s ease-out forwards;
}
/* ====== アニメーション定義 ====== */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

nav div{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
nav div a{
    color: #FFFFFF;
    text-decoration: none;
	font-size:.8rem;
}
nav div a:hover{
    text-decoration: underline;
}
nav div a span::before {
  content: "\25B8";
  color: #fff;
}


/*導入実績数*/
nav #content{
    padding-left: 1.5rem;
}
nav #content a{
    font-size: .8rem;
    color: #FFFFFF;
    text-decoration: none;
}
nav #content a:hover{
    text-decoration: underline;
}
nav #content a i{
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
	font-size: .75rem;
}

#content2{
    display: none;
}
@media (max-width:556px){
/*導入実績数*/
	#content2{
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 0.5rem;
	}
	#content2 a{
    font-size: .9rem;
    color: #333;
    text-decoration: none;
    line-height:1;
	}
	#content2 a:hover{
		text-decoration: underline;
	}
	#content2 a i{
    display: block;
    font-size: .8rem;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
	}
}


/* ログイン*/
nav #login{
    background: var(--ichiro_color);
}
nav #login:hover{
    background: var(--sms3);
}
nav #login a{
    font-size: 1rem;
    color: #FFFFFF;
    text-decoration: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (max-width:850px){
	nav #content{
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-top: 0.5rem;
		padding-right: 0;
		padding-left: 0;
		padding-bottom: 0;
		text-align: center;
	}
	nav #content a,
	nav #content a i{
		font-size: .9rem;
	}
	nav div a{
		font-size:.9rem;
	}
}
@media (max-width:566px){
  nav{ display:none !important; }  /* use nav3 on mobile */
}

/* ===== Main menu (PC only) ===== */
nav2{
  grid-column:left / right; grid-row:nav2 / main; max-width:1000px; margin:0 auto; width:100%;
}

/* ===== Sticky nav2 (スクロールで固定表示) ===== */
nav2.sticky-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  animation: fadeInNav .4s ease;
}

/* フェードインアニメーション */
@keyframes fadeInNav {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


nav2 ul{
  display:flex; justify-content:space-between; align-items:center; max-width:1000px; width:100%;
  margin:5px auto 0; padding:0; list-style:none; border:1px solid #CCC; border-bottom-left-radius:5px; border-bottom-right-radius:5px;
}
nav2 ul li{ margin:0; padding:0; flex:1; border-right:1px solid #CCC; overflow:hidden; }
nav2 ul li:last-child{ border-right:0; }
nav2 ul li a{
  display:block; height:60px; line-height:57px; text-align:center;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-weight:400; font-size:1.1rem;
  color:#333; text-decoration:none; border-top:5px solid var(--main_color);
	transition: letter-spacing 0.4s;
}
nav2 ul li a:hover{
    border-top-color: var(--sms3);
    color: var(--sms3);
    letter-spacing: 0.1rem; /* 字間の設定 */
}
@media (max-width:840px){ nav2 ul li a{ font-size:1rem; } }
@media (max-width:566px){ nav2{ display:none !important; } }

/* ===== Main ===== */
main{
  grid-column:left / right; grid-row:main / footer; width:100%; margin:0 auto 3rem; padding:0; height:auto;
}

/* ===== Right fixed links (右から出現＋バウンド) ===== */
.fix-btn-container {
  position: fixed;
  top: 30%;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(100px);
  background: transparent;
  overflow: hidden;

  /* 小刻みバウンドアニメーション */
  animation: smoothBounceInRight 1.2s ease-out forwards;
  animation-delay: 5s;
}

/* ===== キーフレーム定義 ===== */
@keyframes smoothBounceInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  50% {
    opacity: 1;
    transform: translateX(-20px);
  }
  65% {
    transform: translateX(12px);
  }
  75% {
    transform: translateX(-6px);
  }
  85% {
    transform: translateX(3px);
  }
  95% {
    transform: translateX(-1.5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.fix-btn-item {
    width: 50px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 1rem;
    position: relative;
    overflow: hidden;
 	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: 400;
    line-height: 1;
    contain: layout paint;
    text-decoration: none;
    background-clip: padding-box !important;
    isolation: isolate;
    will-change: transform;
    font-size: 1rem;
}

/* 光エフェクト */
.fix-btn-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -105%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.3);
  transform: skewX(-25deg);
  transition: left .5s ease;
  pointer-events: none;
}
.fix-btn-item:hover::before { left: 120%; }

/* 各ボタン */
#le_side_home  {
    background: rgba(241,141,26,.9);
    border-top-left-radius: 5px;
}
#le_side_case  { background: var(--main_color); }
#le_side_mitsumori {
    background: var(--ichiro_color);
    border-bottom-left-radius: 5px;
}
#page_top {
    margin-top: 50px;
    background: #A4A4A4;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* ===== Footer ===== */
footer{ grid-column:left / right; grid-row:footer / bottom; max-width:1000px; margin:0 auto; width:100%; }
footer .footer_sub{
  display:flex; justify-content:center; align-items:center; gap:1.5rem; flex-wrap:wrap;
  margin:0 auto; padding:1rem 0; list-style:none; max-width:1000px; width:100%; background:var(--main_color);
}
footer .footer_sub a{
  color:#fff; font-size:.8rem; text-decoration:none; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
footer .footer_sub a:hover{ text-decoration:underline; }

  footer .footer_sub li a::before {
  	content: "\25B8";
  	color: #fff;
	}	

/* 3カラム×2行（<=566px） */
@media (max-width:566px){
  footer .footer_sub{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 98%;
    margin-top: 1%;
    margin-right: auto;
    margin-left: auto;
    padding: 8px;
    background: #fff;
    border: 0;
    border-radius: 5px;
    margin-bottom: -8px;
  }
  footer .footer_sub li{
    border: 0 !important;
    padding-left: 0;
	min-width: 0;
  }
  footer .footer_sub li a{
    display: block;
    height: 60px;
    line-height: 60px;
    border: 0 !important;
    border-radius: 5px;
    font-size: .85rem;
    background: var(--main_color);
    color: #fff;
    text-align: center;
    text-decoration: none;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
  }
	footer .footer_sub li a::before {
	  content: none;
	}
}

footer #footer_bar{
  display:flex; justify-content:space-between; align-items:center; max-width:1000px; width:100%;
  margin:.5% auto 0; padding:0; list-style:none; border:1px solid #CCC; border-top:0; border-bottom-left-radius:5px; border-bottom-right-radius:5px;
}
footer #footer_bar li{ flex:1; overflow:hidden; border-right:1px solid #CCC; }
footer #footer_bar li:last-child{ border-right:0; }
footer #footer_bar a{
  display:block; height:60px; line-height:57px; text-align:center;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-weight:400; font-size:1.1rem;
  color:#333; text-decoration:none; border-top:5px solid var(--main_color); font-feature-settings:"palt";
	transition: letter-spacing 0.4s;
}
footer #footer_bar a:hover{ border-top-color:var(--sms3); color:var(--sms3);     border-top-color: var(--sms3);
    color: var(--sms3);
    letter-spacing: 0.1rem; /* 字間の設定 */}


/* スマホ時 footer_bar を2カラム×2行に */
@media (max-width:566px){
  footer #footer_bar{
    border-width: 0;
    width: 94.8%;
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    gap: 8px;
    margin-top: 0 !important;
  }
  footer #footer_bar li{
    flex-basis:calc(50% - 4px);
    height:60px;
    border:0 !important;
  }
  footer #footer_bar a{
    display:block;
    height:60px;
    line-height:60px;
    border:0 !important;
    border-radius:5px;
    font-size:.85rem;
    background:var(--main_color);
    color:#fff;
    text-align:center;
    text-decoration:none;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
}

footer .copylight{
  text-align:center; margin:1rem auto 0; width:100%;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-weight:300;
}
.clearfix::after{ content:""; display:block; clear:both; }

/* ===== Smartphone hamburger + drawer (≤566px) ===== */
.hamburger{ display:none; }

@media (max-width:566px){

.hamburger {
  display: flex;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 3000;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: var(--main_color);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease;
}
.hamburger:hover {
  background: #155ca5;
}

/* 三本線 */
.hamburger__bar {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.25s ease;
}

/* 上下バー */
.hamburger__bar::before,
.hamburger__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    top 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.25s ease;
}

/* 初期位置 */
.hamburger__bar::before {
  transform: translateY(-7px);
}
.hamburger__bar::after {
  transform: translateY(7px);
}

/* 開いた状態（☓形） */
.hamburger.is-open .hamburger__bar {
  transform: rotate(45deg);
}
.hamburger.is-open .hamburger__bar::before {
  transform: rotate(90deg);
  top: 0;
}
.hamburger.is-open .hamburger__bar::after {
  opacity: 0;
}
	

  nav3#spGlobalNav{ position:fixed; inset:0; z-index:2000; display:none; }
  nav3#spGlobalNav.open{ display:block; }
  nav3 .nav3-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.4);
    opacity:0; transition:opacity .25s ease;
  }
  nav3.open .nav3-backdrop{ opacity:1; }
  nav3 .nav3-panel{
    position:absolute; top:0; right:0; height:100%;
    width:min(86vw,360px); background:#fff;
    box-shadow:-8px 0 24px rgba(0,0,0,.15);
    transform:translateX(100%); transition:transform .25s ease;
    display:flex; flex-direction:column; overflow-y:auto;
  }
  nav3.open .nav3-panel{ transform:translateX(0); }
  .nav3-close{
    align-self:flex-end; margin:10px; width:44px; height:44px;
    border:0; border-radius:8px; background:#fff; font-size:28px; line-height:1; cursor:pointer;
  }
  nav3 ul{ list-style:none; margin:0; padding:12px; }
  nav3 li{ margin:0 0 8px; }
  nav3 a{
    display: block;
    padding-top: 14px;
    padding-right: 12px;
    padding-left: 2rem;
    padding-bottom: 14px;
    /*border: 1px solid #e5e7eb;*/
    border-radius: 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 1.2rem;
    font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    background-color: var(--main_color);
  }
  nav3 a:hover{ background:#f5f7fb; border-color:#dbe1f0; }
   nav3 a::before {
    content: "\25B8";
    color: #fff;
    margin-right: 0.2rem;
	}	
	
  nav3 .tel{
    font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-weight: bold;
    font-size: 1.65rem;
    color: var(--sms3);
    margin-bottom: .5rem;
    line-height: .8;
    text-align: center;
	}
	nav3 .tel a{
    padding-top: 1.2rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 1.2rem;
    width: 94%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    background-color: var(--hanako_color);
	}
	
}
@media (min-width:567px){
  nav3#spGlobalNav{ display:none !important; }
}