/*2026/06/17 style2026 */
@charset "utf-8";
/*========================全体の設定==============================*/
body, h1, h2, h3, p, ul, li {
margin: 0px;
padding: 0px;
font-size: 100%;
}
body {
color: #666; /*全体の文字色*/
font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; /*font種類Gemini提案*/
font-size: 20px; /*文字サイズ*/
line-height: 2; /*行間*/
background-image: url(../images/bg_yama_ta1.png);
text-align: center; /*背景画像*/
}
ul {
list-style-type: none;
}
img { /* アニメ用 */
border: none; /*ボダーなし*/
max-width: 100%;
height: auto;
vertical-align: middle; /*垂直方向の表示位置*/
}
a {
color: #666; /*リンクテキストの色*/
text-decoration: none; /*リンク下線を表示しない*/
transition: 0.5s; /*アニメ設定0.5秒 無しでも動くGeminiより*/
}
a:hover {
color: #62c7b5; /*マウスオンの文字色*/
text-decoration: none; /*マウスオンに下線を消す*/
}
span {color: #C46200;font-weight: bold;} /**/
/*-----header-松本インター(ＩＣ)ブルーベリー園-メニュー----------*/
header {
max-width: 1200px; /*最大幅。#menu、.contents、#pagetopを同様*/
position: relative; /*通常の位置を基準とした相対的な配置*/
z-index: 1; /*重なり順の制御最下位*/
margin: 0 auto; /*上下・左右 */
text-align: center; /*内容をセンタリング*/
}
header h1 { /*松本インター（ＩＣ）ブルーベリー園*/
border: none; /*スマホ機種により表示取り消し*/
color: #030;
line-height: 1.3;
font-weight: 500 ;
font-size: 30px ;
text-align: center;
vertical-align: middle;
margin-left: 0px; /*LOGO、左へマージン*/
margin-bottom: 5px;
margin-top: 5px ;
letter-spacing: 0.2em; /*文字間隔*/
}
header h1 img { /* logo17 ロゴ画像表示*/
height:50px;
width: 80px;
margin-right:40px;
vertical-align: middle; /*垂直方向の表示位置*/
}
/*-----------------menu-メニュー------------------*/
#menu {
max-width:1200px; /*最大幅。header、.contents、#pagetopを同様*/
position:relative; /*相対的な配置*/
z-index: 2; /*重なり順の制御最上位-2*/
margin: 0 auto;
border-radius: 30px; /*角丸のサイズ*/
background:rgba(255,255,255,0.0); /*背景色#fff白透明度*/
height: 40px; /*メニューブロックの高さ。*/
padding-top:1px; /*上、menuから までのパディング*/
}
#menu li {
float: left; /*左に回り込み*/
width: 10%; /*メニュー幅*/
}
#menu li a {
text-decoration: none; /*文字装飾下線なし*/
display: block; /*ブロックレベルで表示*/
text-align: center;
line-height: 40px; /*行間（高さ）*/
font-size: 20px;
border: 1px solid #666;
border-radius: 10px; /*角丸のサイズ*/
}
#menu li a:hover {
color: #fff; /*文字色 */
background: rgba(98,199,181,0.5); /*背景色 #62c7b5 */
}
#menu li:first-child { /* first-childは最初のli要素だけ装飾 */
margin-left: 1%; /*メニュー左側に余白*/
}
#menu-s,#navToggle { display: none;} /*#menu-s,#navToggleのmenu非表示*/
/*-------------------コンテンツ----------------------------*/
.contents {
clear: both; /*回り込みを解除*/
max-width: 1200px; /*最大幅 header、#menu、#pagetopを同様*/
margin: 0 auto;
overflow: hidden; /*領域はみ出しを非表示*/
padding: 10px 0; /*よーこそ～メニュー間隔*/
}
.contents h1 { /*contentsクラス内のh1に適用*/
clear: both;
margin-bottom: 5px;
margin-top: 10px;
padding: 8px 20px; /*上下、左右への余白*/
background: rgba(98,199,181,0.5); /*背景色#62c7b5透明度0.5 */
color: #030 ;
border-radius: 10px; /*角丸のサイズ*/
line-height: 1.3;
font-weight: bold ;
font-size: 20px;
text-align: center;
letter-spacing: 0.2em;
}
.contents h2,.contents h3 { /*contentsクラス内のh2に適用*/
clear: both;
margin-bottom: 5px;
margin-top: 10px;
padding: 8px 20px; /*上下、左右への余白*/
background: rgba(98,199,181,0.5); /*背景色#62c7b5透明度0.5 */
color: #030 ;
border-radius: 10px; /*角丸のサイズ*/
line-height: 1.3;
font-weight: 500 ;
font-size: 20px;
text-align: center;
letter-spacing: 0.2em;
}
.contents p {
padding: 5px 10px ; /*contentsクラス内のｐ上下5 左右:10下*/
text-align: left;
}
.type1 {
color: #030 ;
line-height: 1.3 ;
font-weight: 500;
font-size: 20px ;
text-align: left ;
margin-left :0px ;
margin-bottom: 1px ;
margin-top: 1px ;
letter-spacing: 0.1em ;
}
/*--------- ----FaceBookーMark--------------- -----*/
.typefb { /*FaceBook表示*/
border: none; /*スマホ機種により表示取り消し*/
color: #030 ;
line-height: 1.3 ;
font-weight: 500;
font-size: 20px ;
text-align: center ; /*左表示*/
margin-top : 1px ;
margin-left: 0px ;
margin-bottom: 1px ;
letter-spacing: 0.2em ;
}
.typefb img { /*FaceBookロゴ表示*/
height:30px;
width: 100px;
vertical-align: middle; /*垂直方向の表示位置*/
margin-left: 0px
}
.typefbADD
{
text-align: center;
margin-top: 15px;
margin-bottom: 30px;
}
.typefbADD a
{
display: inline-block;
padding: 12px 24px;
background: rgba(98,199,181,0.5);
color: #030;
border-radius: 5px;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/*--------- ----IP-Phone1ーMark--------------- -----*/
.typeip { /*IP-PHONE表示*/
border: none; /*スマホ機種により表示取り消し*/
color: #030 ;
line-height: 1.3 ;
font-weight: 500;
font-size: 20px ;
text-align: center ;
margin-top : 1px ;
margin-left: 0px ;
margin-bottom: 1px ;
letter-spacing: 0.2em ;
}
.typeip img { /*IP-PHONEロゴ表示*/
height:30px;
width: 30px;
vertical-align: middle; /*垂直方向の表示位置*/
margin-left:0px
}
/*--------GoogleMapーMark-----------------------*/
.mapmark img {
vertical-align: middle;
width:20px;
}
/*---------フォームズ---formzu-----------------*/
.formzu {
clear: both;
width: 100% ;
text-align: center;
}
/*-------- table設定----------------------------*/
table {
border-collapse:collapse;
font-size: 100%;
border-spacing: 0;
}
.ta1 { /*tableクラス*/
width: 90%;
margin: 0 5% 10px; /*上.左右,下を指定*/
border-collapse:collapse; /*隣接する境界線を結合して表示する*/
border: solid 1px #999; /*テーブルの枠線の線種, 幅,色 */
}
.ta1, .ta1 td,.ta1 th {
border: solid 2px #ccc; /*テーブルの枠線の幅、線種、色*/
padding: 5px; /*ボックス内の余白*/
word-break:break-all; /*行末で改行 */
font-size:20px ;
}
/*--------------------------footer -------------------------------------*/
footer {
clear: both;
color: #030; /*文字色*/
text-align: center;
}
/*------------------ 上に戻るボタン -------------------------*/
#page-top {
position: fixed; /*浮動表示*/
bottom: 150px; /*上へ表示位置*/
right: 10px; /*右位置*/
}
#page-top a {
background: rgba(98,199,181,0.6); /*上へ#999相当153,153,153 #62c7b5相当 98,199,181*/
text-decoration: none;
color: #fff; /*上への文字色*/
width: 50px; /*上への幅*/
height:30px ; /*上への高さ*/
padding:15px 5px; /*余白調整上への余白調整*/
text-align: center;
display: block;
border-radius: 20px; /*上への〇*/
font-size: 100%;
}
/*--------------------- アニメキャラ ---------------------*/
.marquee { /*marqueeはクラス名*/
position:fixed; /*浮動表示*/
top:50px;
left: 0px; /*左位置指定10px以上だと細身変形？img{max-width: 100%;}を無効に*/
margin:0px; /*指定100px以上だと？img{max-width: 100%;}を無効に*/
padding-left:100%; /*範囲を指定パーセント表示 90%以上だと変形？img{max-width:100%;}を無効に*/
display:inline-block;
white-space:nowrap;
animation-name:marquee; /*クラス名(marquee)*/
animation-timing-function:linear; /*変化速度初期値はease*/
animation-duration:20s; /*速度*/
animation-iteration-count:infinite; /*動作回数初期値は1*/
}
.marquee img { /* 26/05/03 追加 img max-width: 100%;アニメキャラ縮小 解除*/
max-width: none; /* ここでmax-width: 100% 全体設定を打ち消す */
width: 50px;
height: 50px;
}
.marquee1 { /*marqueeはクラス名*/
position: fixed; /*浮動表示*/
top: 150px;
left: 0px; /*左位置指定10px以上だと細身変形？img{max-width: 100%;}を無効に*/
margin: 0px; /*指定100px以上だと？img{max-width: 100%;}を無効に*/
padding-left: 100%; /*範囲を指定パーセント表示 90%以上だと変形？img{max-width:100%;}を無効に*/
display: inline-block;
white-space: nowrap;
animation-name: marquee; /*クラス名(marquee)*/
animation-timing-function: linear; /*変化速度初期値はease*/
animation-duration: 20s; /*速度*/
animation-iteration-count: infinite; /*動作回数初期値は1*/
}
.marquee1 img { /* 26/05/03 追加 img max-width: 100%;アニメキャラ縮小 解除*/
max-width: none; /* ここでmax-width: 100% 全体設定を打ち消す */
width: 50px;
height: 50px;
}
@keyframes marquee { /*クラス名(marquee)の動作範囲指定*/
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
/*-------------- アニメキャラ --サイズ----------------*/
.cara img { width: 50px; height: 50px ;}
.kototorobl img { width: 50px; height: 50px ;}
.weljiji img { width: 50px; height: 50px ;}
.workjiji img { width: 80px; height: 50px ;}
.kurotorack img { width: 60px; height: 40px ;}
/*----------- -----表示位置------------- -----------*/
.clear {clear: both;}
.fr {float: right;margin-left : 1%; margin-bottom: 5px; width: 48%;}
.fl {float: left ;margin-right: 1%; margin-bottom: 5px; width: 48%;}
/*============================ 1200px以下の設定===========================================*/
@media screen and (max-width:1200px){
header,#menu,.contents,#pagetop {margin: 0 3%; } /*上下:0 左右3%*/
}
/*=========================== 1000px以下の設定 #menu-s #navToggle =======================*/
@media screen and (max-width:1000px)
{
/*---------------#menu-s --------------------------*/
#menu-s {
display: none; /*画面幅800px以下メニューを非表示から表示に*/
position: relative ;
z-index: 3; /*重なり順の制御最上位-1*/
padding:1px 1px; /*上下～
までのパディング）*/
}
#menu-s li {
float: left; /*左に回り込み*/
width: 40%; /*幅*/
margin: 0 1% 5px 1%; /*上右下左、メニューの外側にスペース*/
}
#menu-s li a {
text-decoration: none; /*テキストの装飾*/
display: block;
text-align: center;
line-height: 35px; /*#menu-s 枠高さ*/
font-weight: 500 ;
font-size:20px ;
padding:2px 2px; /*内側の余白*/
border: 2px solid #666; /*枠線の幅、線種、色*/
border-radius: 10px; /*角丸のサイズ*/
}
#menu-s li a:hover {
color: #fff; /*文字色*/
background:rgba(98,199,181,0.5); /*背景色*/
}
#menu-s.active {display: block; } /*#menu-s表示classonoff-top.jsでactiveに*/
#menu {display: none; } /*画面幅801px以上 メニューを非表示*/
/*------松本インター(ＩＣ)ブルーベリー園----------*/
header h1 { /*松本インター(ＩＣ)ブルーベリー園*/
font-size:20px;
padding:1px 0px; /*LOGO上下、左右への余白*/
margin-left:0px; /*LOGO、左へマージン*/
text-align:left;
}
header h1 img {display: none; } /* logo17 ロゴ画像表示*/
/*---------------文字type-------------------------*/
.contents h2 { font-size: 20px; } /*contentsクラス内のh2に適用*/
.contents h3 { font-size: 20px; } /*contentsクラス内のh3に適用*/
.type1 { font-size: 20px; }
/*---------------ハンバーグ----Hamburg----------------*/
#navToggle { /*ハンバーグ枠*/
display: block;
position: fixed ; /*浮動表示*/
z-index: 4; /*重なり順の制御最上位*/
right: 10px;
top : 30px; /*TOPからの*/
width: 50px;
height: 52px;
cursor: pointer;
background:rgba(98,199,181,0.6); /*Hamburgの色 #999相当153,153,153 #62c7b5相当 98,199,181 */
border-radius: 10px; /*枠の隅〇*/
text-align: center;
}
#navToggle span {
display: block;
position: absolute; /*#navToggleに対して固定 */
width: 40px;
border-bottom: solid 3px #eee; /*バーの色*/
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 6px; /*左スペース*/
}
#navToggle span:nth-child(1) {top: 9px; } /*１番目*/
#navToggle span:nth-child(2) {top: 18px; } /*２番目*/
#navToggle span:nth-child(3) {top: 27px; } /*３番目*/
#navToggle span:nth-child(4) { /*MENUの表示枠*/
border: none;
color: #eee; /*メニューの色*/
font-size: 15px;
font-weight: 500;
letter-spacing: 0em ;
margin-top : -5px; /*MUNE表示上調整*/
margin-left :-0px; /*MUNE表示左調整*/
top: 32px;
}
#navToggle.active { /*×印activの色設定*/
background:rgba(98,199,181,0.8); /*×時のHamburgの色#999相当153,153,153 #62c7b5相当 98,199,181*/
}
#navToggle.active span:nth-child(1) { /*最初のspanをマイナス45度に */
top: 18px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#navToggle.active span:nth-child(2),
#navToggle.active span:nth-child(3) { /*2番目と3番目のspanを45度に */
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
/*----------- 上へ戻るボタン -表示---------------------*/
#page-top { display:block;} /*page-top表示*/
} /*画面幅1000px以下の設定終わり */
/*=========================== 800px以下の設定 ============================================*/
@media screen and (max-width:800px)
{
header { text-align: left; } /*内容を左寄せに変更*/
.ta1 td,.ta1 th {
width: auto;
padding: 5px;
font-size: 16px ;
}
/*-------- アニメキャラ --スピードダウン----------*/
.marquee { /*marqueeはクラス名*/
position:fixed; /*浮動表示*/
top:50px;
margin:0px; /*指定100px以上だと ？*/
animation-duration:10s; /*速度*/
}
/*------------800px以下--表示位置------------------------*/
.fr {float: none;margin: 0;margin-bottom: 10px;width: 100%;}
.fl {float: none;margin: 0;margin-bottom: 10px;width: 100%;}
} /*画面幅800px以下の設定終わり */
/*=========================== 500px以下の設定 ==Google最小幅500PX===============================*/
@media screen and (max-width:500px)
{
body {
font-size:18px; /*文字サイズ*/
line-height:1.6; /*行間*/
}
header h1 {
font-size:18px; /*14px以下変化なし？*/
padding: 1px 0px; /*LOGO上下、左右への余白*/
margin-top: 4px; /* 5px より 4Px */
margin-bottom:0px; /* 5px より 0Px */
text-align:left; /* center より left に */
}
.contents h2 ,.contents h3 /*contentsクラス内のh2h3に適用*/
{
margin-bottom: 0px;
margin-top: 2px;
padding: 2px 10px; /*上下、左右への余白*/
border-radius: 5px; /*角丸のサイズ*/
font-size: 16px;
}
/*-------- table設定----------------------------*/
table {
border-collapse:collapse;
font-size: 100%;
border-spacing: 0;
}
.ta1 { /*tableクラス*/
width: 90%;
margin: 4Px 5% 10px; /*上.左右,下を指定*/
border-collapse:collapse; /*隣接する境界線を結合して表示する*/
border: solid 1px #999; /*テーブルの枠線の線種, 幅,色 */
}
.ta1,.ta1 td,.ta1 th
{
padding:10px 2px 10px 2px; /*上 右 下 左*/
font-size: 12px;
}
.type1 {
font-size: 14px;
}
.typeip {
font-size: 14px;
}
.typefb {
font-size: 14px;
}
} /*画面幅500px以下の設定の設定終わり */
/*------------------------END-----------------------------------------------------*/