/*
Theme Name: RDSGN ORIGINAL									
*/
.sp{display:none;}
.grecaptcha-badge { visibility: hidden; }

/**********************************************
    PC版 CSS
**********************************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');/*日本語明朝*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

.righteous {
  font-family: "Righteous", sans-serif;

  font-style: normal;
}


/**************************************************************
全体
**************************************************************/
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, font, 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 {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    font: 500 16px/1.75 "Noto Sans JP", sans-serif;
    color: #000;
    text-align: left;
    letter-spacing: 0.05em;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    font-size: 13px;
    margin: 0px;
    text-align: center;
    line-height: 180%;
}


/**************************************************************
リンク
**************************************************************/
a:link {
    color: #000;
    text-decoration: none;
	transition: 1.0s ;
}
a:visited {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration: none;
}
a:active {
    color: #000;
    text-decoration: none;
}

.about-p{

}

.about-p h2{
	background-color:#000;
	padding:30px!important;
	font-size:20px!important;
	color:#fff!important;
	margin:0!important;
}

.about-mv{
	background-image: linear-gradient(rgba(0, 88, 171, 0.6), rgba(0, 88, 171, 0.6)), url(https://p-pata.com/pataweb/wp-content/themes/rdsgn/image/base/hbg.jpg);
	background-color: #0058ab;
	padding:15px 0;
	background-position: center;
	text-align:center;
}
.about-mv img{
	max-width:1000px;
	height:auto;
	display:block;
	margin:0 auto;
}

.about-p h3{
	font-size:22px;
	line-height:150%;
	padding:40px 0 20px 0;
	color:#3e7dd2;
}

.about-p p{
	width:1000px;
	margin:0 auto;
	font-size:13px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.about-p .link-botan{
	width:300px;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}

.about-p .link-botan a{
	background: #007cd8;
        color: #fff;
        background-image: url(https://p-pata.com/pataweb/wp-content/themes/rdsgn/image/base/hbg.jpg);
	padding:15px;
	display:block;
	border-radius:10px;

}

.about-p .link-botan a:hover{	transition: 1.0s ;
    opacity:0.7;}
.about-p .link-botan img{
	width:100%;
	height:auto;
	display:block;
}

.footer{
	margin-top:50px;
	padding:10px;
	background-color:#565656;
	color:#fff;
	font-size:11px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
.footer p{
	margin-bottom:10px;
}


/****************************************************
 * header
 * *******************************/

.header{
	display:flex;
	justify-content:space-between;
	background-color:#ffd200!important;
}
.header .logo{
	width:300px;
}
.header .logo img{
	width:100%;
	height:auto;
}
.mv{
	background-color:#ffd200!important;
	padding:50px;
	display:flex;
	background-image:url(https://tabi-1.net/wp-content/uploads/2025/10/bg.webp);
	background-size:100%;
}
.mv .rr{
	width:50%;
	overflow:hidden;
}
.mv .ll{
	width:50%;
}
.mv .ll img{
	width:800px;
}

/* レイアウト */
.service-bubbles{padding:48px 0}
.sec-tt{font-weight:700;font-size:24px;margin:0 0 18px}

.svc-cloud{display:flex;
	flex-wrap:wrap;
	gap:26px;
	justify-content:center;
margin-top:20px;}

/* 丸いカード本体（位置：相対。ドリフトはこの要素に） */
.svc{
  list-style:none;
  position:relative;
  --size: 30%;                 /* アイコンの大きさ */
  width:var(--size);
  aspect-ratio:1/1;
  animation: drift-a 19s ease-in-out infinite alternate;
  animation-delay: -2.5s;
}

/* 画像を丸抜き＆テキスト重ね */
.svc a{display:block;width:100%;height:100%}
.svc .svc-img{
  position:relative;
  width:100%; height:100%;
  border-radius:50%; overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  animation: pulse 6.5s ease-in-out infinite;
}
.svc .svc-img img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}

/* ホバー時は“ビョン”と強めに（オーバーシュート） */
.svc:hover .svc-img{
  animation: pulse-boost .5s cubic-bezier(.2,.9,.2,1.2) both;
}

/* ばらつき：周期・遅延・軌道・方向を要素ごとに変える */
.svc:nth-child(6n+1){ animation-name:drift-a; animation-duration:18s; animation-delay:-3.2s; }
.svc:nth-child(6n+2){ animation-name:drift-b; animation-duration:21s; animation-delay:-6.4s; }
.svc:nth-child(6n+3){ animation-name:drift-c; animation-duration:24s; animation-delay:-8.1s; }
.svc:nth-child(6n+4){ animation-name:drift-d; animation-duration:17s; animation-direction:alternate-reverse; }
.svc:nth-child(6n+5){ animation-name:drift-e; animation-duration:22s; animation-delay:-4.8s; }
.svc:nth-child(6n){   animation-name:drift-f; animation-duration:26s; filter:drop-shadow(0 8px 20px rgba(0,0,0,.12)); }

/* ==== keyframes：軌道を6種類（派手め） ==== */
@keyframes drift-a{
  0%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(22px,-26px) rotate(1.8deg)}
  55%{transform:translate(-28px,-8px) rotate(-1.2deg)}
  80%{transform:translate(14px,20px) rotate(.8deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes drift-b{
  0%{transform:translate(0,0) rotate(0)}
  30%{transform:translate(-20px,18px) rotate(-1.6deg)}
  60%{transform:translate(26px,10px) rotate(1deg)}
  100%{transform:translate(-8px,-22px) rotate(-.6deg)}
}
@keyframes drift-c{
  0%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(14px,-18px) rotate(.8deg)}
  50%{transform:translate(-16px,26px) rotate(-2deg)}
  85%{transform:translate(22px,6px) rotate(1.4deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes drift-d{
  0%{transform:translate(0,0) rotate(0)}
  35%{transform:translate(28px,8px) rotate(2deg)}
  70%{transform:translate(-24px,18px) rotate(-1.4deg)}
  100%{transform:translate(6px,-22px) rotate(.6deg)}
}
@keyframes drift-e{
  0%{transform:translate(0,0) rotate(0)}
  40%{transform:translate(-26px,-14px) rotate(-2deg)}
  75%{transform:translate(18px,24px) rotate(1.2deg)}
  100%{transform:translate(-10px,8px) rotate(-.6deg)}
}
@keyframes drift-f{
  0%{transform:translate(0,0) rotate(0)}
  22%{transform:translate(16px,24px) rotate(1.2deg)}
  52%{transform:translate(-30px,4px) rotate(-2.2deg)}
  100%{transform:translate(10px,-18px) rotate(.8deg)}
}

/* 脈動（常時ゆるく） */
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
/* ホバーのビョン（強） */
@keyframes pulse-boost{
  0%{transform:scale(1)}
  60%{transform:scale(1.12)}
  100%{transform:scale(1.08)}
}

/* 動きが多すぎると感じる人向けに尊重 */
@media (prefers-reduced-motion: reduce){
  .svc,.svc .svc-img{ animation:none !important }
}
/* ラベル（白文字を載せる） */
.svc-label{
position: absolute;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        bottom: 10%;
        /* transform: translateX(-50%); */
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .02em;
        color: #fff;
        padding: .35em .8em;
        /* border-radius: 999px; */
        background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .5));
        text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
        pointer-events: none;
}

/* スマホで少し小さめに（必要なら調整） */
@media (max-width:640px){
  .svc{ --size: 110px }
  .svc-label{font-size:12px}
}


.svc h3{
	font-size:11px;
	margin-top:8px;
	text-align:center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

}



.header .cta {
  display: flex;
  justify-content: center;
  gap: 10px;
	margin:15px 0;
	margin-right:20px;
    font: 500 16px/1.75 "Noto Sans JP", sans-serif;
	align-items:center;
}

.header .cta .btn {
  display: inline-block;
	padding:10px 20px;
  border-radius: 50px;
  font-size: 15px;
  text-decoration: none;
  color: #fff;
  transition: all 0.3s ease;
}

/* 黒ボタン */
.header .cta .btn.black {
  background: #000;
}
.cta .btn.black:hover {
  background: #333;
}

/* 阿寒ボタン（情熱的な赤） */
.header .cta .btn.akan {
  background: #ab2019; /* 阿寒レッド */
}
.header .cta .btn.akan:hover {
  background: #d6281c;
}

/********************************
 * 多可町ってどんなまち？
 * ************************************/

.about-takacho {
  background-image: 
    url("https://tabi-1.net/wp-content/uploads/2025/11/bg3.webp"),  /* 左端 */
    url("https://tabi-1.net/wp-content/uploads/2025/11/bg4.webp");  /* メイン */
  background-repeat: no-repeat, no-repeat;
  background-position: left center, center top;
  background-size: auto 100%, 100%;
  background-attachment: fixed, fixed; /* ← スクロール固定 */
  padding: 80px 0;
}
.about-takacho-inner{
	width:1200px;
	margin:0 auto;
}
.about-takacho-inner h2{
	color:#fff;
	font-size:50px;
	line-height:100%;
}
.about-takacho-inner h2 span{
	font-size:18px;
}


.spot {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.spot-item {
  display: flex;

  gap: 40px;
  margin: 80px 0;
}

.spot-item.reverse {
  flex-direction: row-reverse;
}

.spot-img {
  flex: 1;
}

.spot-img img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
	border:solid 6px #fff;
}

.spot-text {
  flex: 1;
  color: #fff;
  line-height: 1.8;
}

.spot-text h3 {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: 700;
}

.spot-text p {
  font-size: 14px;
  margin-bottom: 20px;
	text-align:left;
}

.more {
  display: inline-block;
  padding: 10px 28px;
  background: #ffff00;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  border-radius: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.more:hover {
  background: #000;
  color: #ffff00;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}