@charset "utf-8";

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


/* 共通 標準要素 A
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
html { }

main { position:relative; overflow:hidden; }

/* 画像リサイズ自動調整 */
img.object-fit-img { object-fit:cover; font-family:'object-fit: cover;'; overflow:hidden; }



.nappblk1bg1 {
position: relative;
width: 100%;
min-height: 0px;
background-image: url("../images/headbg1.webp");
background-repeat: repeat-x;
background-position: center top;  /* 画面トップの左右中央 */
background-size: 1300px 62px;   /* 元のサイズ（5200×300）のちょうど50%を指定 */
}

.nappblk1bg2 { 
position: absolute;
width: 100%;
min-height: 220px;
background-image: url("../images/headbg2.webp");
background-repeat: no-repeat;
background-position: center top;  /* 画面トップの左右中央 */
background-size: 1300px 220px;   /* 元のサイズのちょうど50%を指定 */
}

.nappblk1logo { position: relative; margin: 0 auto; padding: 10px 10px 0 10px; width: 100%; text-align: right; }
.nappblk1logo img { width: 94px; }

.nappblk1titsp { 
  background-image: url("../images/blkbg01sp.webp");
  background-repeat: no-repeat;
  /* 縦の位置を -30% から 90% まで画面幅に応じて可変にする */
  background-position: center clamp(-30%, calc(90% - (120 * (100vw - 375px) / (1200 - 375))), 90%);
  background-size: 865px 295px;
}

.nappblk1tit { position: relative; margin: 0 auto; padding: 0; width: 81%; max-width: 460px; }
.nappblk1tit img { width: 100%; }


.app_service_title {
  position: relative;
  margin: 0 auto 0 auto;
  padding: 0;
  width: 90%; 
  font-family: 'LINE Seed JP', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  text-align: center; /* これで中の span が中央に寄ります */
  line-height: 1.2;
}

/* グラデーションと複数行の処理を span に引っ越す */
.app_service_title span {
  display: inline; 
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  background: linear-gradient(
    to bottom, 
    #0062b1 0%,   #0062b1 50%,
    #45a1dc 50%,  #45a1dc 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


.nappblk1btnwk { position:relative; margin: 1em auto 0 auto; width:81%;  
display: flex;
	flex-wrap: wrap;
justify-content: space-between;
}

.nappblk1btnbx1 { width: 42%; text-align: left; }
.nappblk1btnbx1 img { width: 100%; max-width: 210px; }

.nappblk1btnbx2 { width: 51%; text-align: right; }
.nappblk1btnbx2 img { width: 100%; max-width: 250px; }

/* 2つのボタン共通の設定 */
.nappblk1btnbx1 a,
.nappblk1btnbx2 a {
display: inline-block; /* 浮き上がるアニメーションを正しく効かせるために必須 */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* 0.3秒かけてふわっと動かす */
}

/* マウスオーバー（ホバー）時の設定 */
.nappblk1btnbx1 a:hover,
.nappblk1btnbx2 a:hover {
transform: translateY(-4px); /* 上方向に4px移動させる */
}



.nappblk2 { 
position: relative;
width: 100%;
min-height: 0px;
background-image: none;
}

.nappblk2owk { position:relative; margin:2em auto 0 auto; width:100%;  
}


.ysimvlmp4 { position: relative; margin: 1em auto 0 auto; padding: 0; width: 81%; border: 4px solid #deecf9; border-radius: 6px; overflow: hidden; line-height: 0.1; }
.ysimvlmp4 video { position: relative; margin: 0; padding: 0; width: 100%; }



.nappblk3a { position: relative; margin: 2em auto 0 auto; 
width: 100%;
height: 62px;
background-image: url("../images/blibg02.webp");
background-repeat: repeat-x;
background-position: center top;  /* 画面トップの左右中央 */
background-size: 1300px 62px;   /* 元のサイズ（5200×250）のちょうど50%を指定 */
}


.nappblk3b {  position: relative; margin: 0 auto; padding: 0 0 1em 0; width: 100%; background-color: #deecf9; min-height: 0px;
}

.nappblk3owk { position:relative; margin:0 auto; padding: 1em 0 0 0;  width:90%;  
}

.nappblk3owk h3 { position: relative; margin: 0.6em auto 0 auto; width: 90%;
font-family: 'LINE Seed JP', sans-serif;
font-weight: 700;
font-size: 1.1rem;
text-align: justify;
line-height: 1.6;
}


.nappblk3mwk { position:relative; margin:1.5em auto 0 auto; width:100%; 
display: flex;
	flex-wrap: wrap;
justify-content: space-around;
gap: 20px 15px; /* 上下の余白（row-gap）: 25px / 左右の余白（column-gap）: 25px */
}

.nappblk3mbx { position: relative; padding: 15px; width:47%; background-color: #fff; border-radius: 6px; min-height: 0px; }

.nappblk3mbxicon { position: relative; margin: 0 auto; width: 45px; }
.nappblk3mbxicon img { width: 100%; }

.nappblk3mbxnew { position: absolute; top: -10px; left: 15px; width: 38px; }
.nappblk3mbxnew img { width: 100%; }

.nappblk3mbx h4 { position: relative; margin: 0.4em 0;
font-family: 'LINE Seed JP', sans-serif;
font-weight: 800;
font-size: 1rem;
text-align: center;
		line-height: 1.5;
}

.nappblk3mbx p { 
font-family: 'LINE Seed JP', sans-serif;
font-weight: 400;
font-size: 0.9rem;
letter-spacing: -0.5px;
text-align: justify;
		line-height: 1.5;
}

.nappblk3mbx p.nappb3cmt { padding-left: 1em; text-indent: -1em; margin-top: 0.7em; font-size: 0.8rem; }

.nappblk3mbx p sup { font-size: 0.65rem; }


.nappblk3mbx .int1 { padding-left: 1em; text-indent: -1em; }

.nappblk3mbx p a:link { color:#0068b8; text-decoration:underline; border: none; transition: all 0.3s ease;  font-weight: 700; }
.nappblk3mbx p a:visited { color:#0068b8; text-decoration:underline; border: none; }
.nappblk3mbx p a:hover { color:#00b8ee; text-decoration: underline; border: none; }
.nappblk3mbx p a:active { color:#00b8ee; text-decoration: underline; border: none; }




/* 親要素をFlexboxにして、上下中央揃えにする */
.nappblk3btnmds {
display: flex;
align-items: center; /* これで子要素が上下中央で揃います */
gap: 15px;           /* イラストとテキストの間の余白（必要に応じて調整してください） */
margin: 3em auto 0 auto;
width: fit-content;
}

.nappblk3btnmdsimg {
width: 60px;
flex-shrink: 0;      /* 画面が狭くなってもイラストが縮まないように固定 */
}
.nappblk3btnmdsimg img {
width: 100%;
display: block;      /* 画像の下にできる謎の隙間を消す */
}

/* positionやpadding-leftを削除してシンプルに */
.nappblk3btnmdstxt {
width: 100%;
}

.nappblk3btnmdstxt h5 {
font-family: 'LINE Seed JP', sans-serif;
font-weight: 800;
font-size: 1.7rem;
text-align: left;
line-height: 1.1;
}

.npb3nmt1 { color: #37a7e0; font-size: 1.2rem !important; margin-bottom: 0.1em !important; }
.npb3nmt2 { color: #006dbd; }



.btn_container { position: relative;
margin: 1.5em auto 0 auto;
width: 80%;
max-width: 570px;
text-align: center;
}

/* リンクボタン本体 */
.rokin_app_btn {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: #006cb8;
border-radius: 6px;
padding: 0.5em 2em 0.5em 1em;
text-decoration: none;
box-sizing: border-box;
width: 100%;
overflow: hidden;
transition: background-color 0.3s;
}

/* ホバー時の簡易エフェクト */
.rokin_app_btn:hover {
background-color: #2ea7e0;
}

/* ボタンのテキスト */
.rokin_app_btn_text {
color: #ffffff;
font-family: 'LINE Seed JP', sans-serif;
font-weight: 700;
font-size: 1.2rem;
line-height: 1.2;
margin: 0 auto; /* テキストを常に左右中央に配置 */
padding-left: 1em; /* 右側の矢印領域とのバランスをとる調整 */
}

/* 【修正】右側のクッキリ2段階の光沢エフェクト */
.rokin_app_btn_shine {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
/* 位置のパーセンテージを同じにすることで、境界線をクッキリさせています */
background: linear-gradient(
115deg, 
transparent 0%, 
transparent 45%, 
rgba(255, 255, 255, 0.25) 45%, /* ここで1段階目の薄い白に切り替わる */
rgba(255, 255, 255, 0.25) 77%, 
rgba(255, 255, 255, 0.45) 77%  /* ここで2段階目の濃い白に切り替わる */
);
pointer-events: none;
}

/* 矢印アイコンの配置 */
.rokin_app_btn_arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}

/* 右矢印のSVGスタイル */
.rokin_app_btn_arrow svg {
width: 14px;
height: 16px;
fill: #ffffff;
}



.nappblk4a { position: relative; margin: 0 auto; 
width: 100%;
height: 62px;
background-image: url("../images/blkbg03.webp");
background-repeat: repeat-x;
background-position: center top;  /* 画面トップの左右中央 */
background-size: 1300px 62px;   /* 元のサイズ（5200×250）のちょうど50%を指定 */
}

.nappblk4b {  position: relative; margin: 0 auto; width: 100%; background-color: #0078c7; min-height: 0px;
}

.nappblk4owk { position:relative; margin:0 auto; padding: 1em 0 1em 0;  width:81%;  
}


.nappblk4btit { position: relative; margin: 0 auto; width: 100%; }
.nappblk4btit img { width: 100%; }

.nappblk4bz1 { position: relative; margin: 0 auto; padding: 1.5em 0 0em 0; width: 90%; 
background-image: none;
background-repeat: no-repeat;
background-position: center -3em;  /* 画面トップの左右中央 */
background-size: 800px 800px;   /* 元のサイズのちょうど50%を指定 */
}
.nappblk4bz1 img { width: 100%; }




.nappblk4blst { 
  position: relative; 
  margin: 1.5em auto 0 auto; 
  width: 100%; 
  box-sizing: border-box; /* パディングによる幅の広がりを防ぐ */
}

/* 1. 親要素をFlexboxにして、上下中央揃えにする */
.nappblk4blstbx { 
  display: flex;
  align-items: center; /* これで中の要素が上下中央に揃います */
  margin: 0.5em auto; 
  padding: 12px 15px; /* 左右の余白を少し調整 */
  width: 100%; 
  background-color: #fff; 
  border-radius: 10px; 
  box-sizing: border-box;
}

/* 2. position: absolute を削除し、画像の横幅を固定する */
.nappblk4blstbxnum { 
  flex-shrink: 0; /* 画面が狭くなっても画像が潰れないようにする */
  width: 27px; 
  margin-right: 13px; /* 画像とテキストの間の余白（元の40px - 27px分） */
}
.nappblk4blstbxnum img { 
  width: 100%; 
  display: block; /* 画像の下に変な隙間ができるのを防ぐ */
}

/* 3. 左側の余白（padding-left）を削除する */
.nappblk4blstbx p { 
  margin: 0; /* デフォルトの上下余白をリセット */
  width: 100%; 
  color: #006dbd;
  font-family: 'LINE Seed JP', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  line-height: 1.4;
}




.nappblk5a { position: relative; margin: 0 auto; 
width: 100%;
height: 62px;
background-image: url("../images/blkbg05.webp");
background-repeat: repeat-x;
background-position: center top;  /* 画面トップの左右中央 */
background-size: 1300px 62px;   /* 元のサイズ（5200×250）のちょうど50%を指定 */
}

.nappblk5b { padding-bottom: 3em;
position: relative;
width: 100%;
background-image: url("../images/blkbg06sp.webp");
background-repeat: no-repeat;
background-position: center top;  /* 画面トップの左右中央 */
background-size: 772px 661px;   /* 元のサイズのちょうど50%を指定 */
min-height: 0px;
}


.nappblk5owk { position:relative; margin:0 auto; padding: 2em 0 0 0;  width:100%; 
}



.nappblk5kmds { position: relative; margin: 2.5em auto 0 auto; padding: 1.6em 1em 1em 1em; width: 81%; max-width: 700px; border-radius: 15px; border: 1px solid #808080; background-color: #fff; }

.nappblk5kmds h6 {
font-family: 'LINE Seed JP', sans-serif;
font-weight: 700;
font-size: 1.2rem;
line-height: 1.4;
text-align: center;
}

.nappblk5kmdskks { 
  position: absolute; 
  top: -10px; 
  
  /* ▼ ここから修正・追加 */
  left: 50%; 
  transform: translateX(-50%); 
  /* ▲ ここまで */
  
  padding: 0.2em 1em; 
  width: 240px; 
  border-radius: 100px; 
  background-color: #0078c7; 
  box-sizing: border-box; /* 念のため：パディングによる幅のズレを防ぐ */
}

.nappblk5kmdskks p {
color: #fff;
font-family: 'LINE Seed JP', sans-serif;
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
text-align: center;
}



.nappblk6 { position: relative; margin: 0 auto; padding: 0; width: 100%; background-color: #f3f3f3;
}

.nappblk6owk { position:relative; margin:0 auto; padding: 2em 1em 2em 0;  width:90%; 
}


.nappblk6owk h5 {
color: #0068b8;
font-family: 'LINE Seed JP', sans-serif;
font-weight: 700;
font-size: 1.1rem;
line-height: 2;
text-align: left;
}


.nappblk6owk p {
font-family: 'LINE Seed JP', sans-serif;
font-weight: 400;
font-size: 1rem;
letter-spacing: -0.5px;
line-height: 1.8;
text-align: justify;
padding-left: 1em;
text-indent: -1em;
}

.nappblk6owk p.np6kcs2 {
padding-left: 2em;
text-indent: -1em;
}


.footlogo { position: relative; margin: 1.5em auto 0 auto; padding-bottom: 1em; width: 160px; line-height: 0.1; }
.footlogo img { width: 100%; }

.footer { position:relative; margin: 0 auto 1em auto; width: 90%; line-height: 0.1; }

.footcredit { text-align:center; font-size:0.8rem; color:#666; line-height: 1.4;  }





/* 20260724追加 */


.okrds1 { letter-spacing: 0px; }
.okrds2 { letter-spacing: 0px; }

.okrkm1 { letter-spacing: 0px !important; }
.okrkm3 { letter-spacing: 0px; }
.okrkm2 { letter-spacing: 0px; }
.okrkm05 { letter-spacing: 0px !important; }






























































}