@charset "UTF-8";
@import url(//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/*--------------------------------------------------------------------------------------------------------------------
スマホ：374pxまで（iPhone12未満）
タブレット：600px以上
@media screen and (min-width: 600px) {
PC：1000px以上
@media screen and (min-width: 1000px) {
--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------
メインメニュー：gnav
スマホメニュー：mnav
--------------------------------------------------------------------------------------------------------------------*/
:root {
    /* ▼ 変更点：少し小さくして上品に */
    --font-size : 17px; 
    
    /* ▼ 変更点：2emは広すぎなので、1.8くらいに締める */
    --line-height : 1.8; 

    /* 色設定などはそのまま */
    /*黒*/                  --color-01 : #000;
    /*白*/                  --color-02 : #fff;
    /*テーマカラー1*/       --color-03 : #000;
    /*テーマカラー2*/       --color-04 : #666;
    /*フッタ*/          --color-05 : #999;
    /*フッタSEO*/   --color-06 : #ccc;
    /*ヘッダ背景*/                         --color-07 : #efefef;
    /*必須・attention・require*/               --color-08 : #d00;
    /*フロートメニュー*/                         --color-09 : #377389;
    /*モバイルメニュー背景色・mnav*/      --color-10 : #377389;
    /*リンク色A*/                                      --color-a : #1d3993;
    /*リンク色A:visited*/                         --color-visited : #7f008b;
    /*リンク色A:hover*/                         --color-hover : #fd0000;
    /*リンク色反転A:hover*/                     --color-hover_rev : #fc0;
    /*サイト名高さ*/                                  --size-sitename : 60px;
    /*GNAV高さ*/                                      --size-gnav : 0px;
    /*メニュー幅*/                                      --size-mnav : 240px;
    /*foot_nav高さ*/                                  --size-foot_nav : 40px;
    /*左右padding*/                                   --size-side : 10px;
    /*content上下padding*/                      --size-padding : 30px;
    /*ブロックサイズ*/
    --w-large : 1000px;
    --w-medium : 640px;
    --w-half : 48%;
    --w-1-third : 32%;
    --w-quater : 24%;
    --w-small : 300px;
    --w-thumb : 150px;
}

/*--------------------------------------------------------------------------------------------------------------------
■HTML・BODY
--------------------------------------------------------------------------------------------------------------------*/
html {
	margin : 0;
	padding : 0;
	height : 100%;
}
body {
	margin : 0;
	margin-top : 0!important;	/*scroll_fix.js対策*/
	padding : 0;
	background : var(--color-02);;
	font-size : var(--font-size);
	line-height : var(--line-height);
	font-family : "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	/*font-family : "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	color : var(--color-01);
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
	table-layout : fixed;
	overflow-wrap : break-word;
	word-break : break-word;
	    background: url('../images/wasi.jpg') repeat;
}

/*----------------------------------------------------------
■リンク
----------------------------------------------------------*/
a {
	color : var(--color-a);
	text-decoration : none;
}
a:visited {
	color : var(--color-visited);
}
a:hover {
	color : var(--color-hover);
	outline : 0;
}
a img {
	border : none;
}
a:hover img {
	opacity : 0.8;
}
b,
strong {
	font-weight : bold;
}
.color-spot {
	color : var(--color-04);
}
/*--------------------------------------------------------------------------------------------------------------------
■表示コントロール
--------------------------------------------------------------------------------------------------------------------*/
.w-large,
.w-half ,
.w-medium,
.w-small {
	width : 100%;
}
@media screen and (min-width : 1000px) {
.w-full {
	width : 100%;
}
.w-large {
	width : var(--w-large);
	margin : 0 auto;
}
.w-medium {
	width : var(--w-medium);
}
.w-half {
	width : var(--w-half);
}
.w-1-third {
	width : var(--w-1-third);
}
.w-quarter {
	width : var(--w-quarter);
}
.w-small {
	width : var(--w-small);
}
.w-thumb {
	width : var(--w-thumb);
}
}

.food,
.alubm{
	font-size:85%;
	line-height:1.4em;
}


/*お取り寄せ*/

table.chumon {
	border-collapse: collapse;
	width: 100%;
	border-top: 2px solid #666666;
	border-bottom: 2px solid #666666;
	margin: 0 0 20px 0;
	background: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
table.chumon td {
	font-size: 14px;
	line-height: 1.2em;
	text-align: left;
	padding: 14px 4px;
	vertical-align: top;
}
table.chumon td p {
	margin: 0;
	padding: 0;
}
table.chumon td h3 {
	margin: 6px 0;
	padding: 0;
	font-weight: bold;
	color: #305B9C;
}
table.chumon th {
	font-size: 14px;
	line-height: 1.2em;
	padding: 14px 4px;
	font-weight: bold;
	text-align: left;
	background: #dedede;
	vertical-align: central;
	width: 28%;
}
table.chumon tr {
	border-bottom: 2px solid #666666;
}
/*--------------------------------------------------------------------------------------------------------------------
■grid2-1 2列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid2-1 {
	display : block;
	margin : 0;
	padding : 0;
}
.grid2-1 div {
	margin : 0 0 2em 0;
}
@media screen and (min-width: 640px) {
.grid2-1 {
	display : grid;
	grid-template-columns : repeat(2, 49%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■3-1col 3列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid3-1 {
	display : block;
}
.grid3-1 div {
	margin : 0 0 20px 0;
}
@media screen and (min-width: 640px) {
.grid3-1 {
	display : grid;
	grid-template-columns : repeat(3, 30%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■3-2col 3列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid3-2 {
	display : grid;
	grid-template-columns : repeat(2, 48%);
	justify-content : space-between;
}
.grid3-2 div {
	margin : 0 0 20px 0;
}
@media screen and (min-width: 640px) {
.grid3-2 {
	display : grid;
	grid-template-columns : repeat(3, 30%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■4-1col 4列一覧表示
--------------------------------------------------------------------------------------------------------------------*/
.grid4-1 {
	display : block;
}
.grid4-1 div {
	margin : 0 0 2em 0;
}
@media screen and (min-width: 640px) {
.grid4-1 {
	display : grid;
	grid-template-columns : repeat(4, 23%);
	justify-content : space-between;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■全幅（w-large内で全幅表示）
--------------------------------------------------------------------------------------------------------------------*/
.full-width {
	margin-left : -10px!important;
	margin-right : -10px!important;
	padding-left : 10px!important;
	padding-right : 10px!important;
}
@media screen and (min-width: 1000px) {
.full-width {
	margin-left : calc(-1 * (100vw - var(--w-large)) / 2)!important;
	margin-right : calc(-1 * (100vw - var(--w-large)) / 2)!important;
	padding-left : calc((100vw - var(--w-large)) / 2)!important;
	padding-right : calc((100vw - var(--w-large)) / 2)!important;
}
}
/*------
■ブロック
---------*/
#wrapper {
	position : relative;
	padding : 0;
}
header {
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	height : 60px;
	margin : 0;
	z-index : 9999;
	background : var(--color-02);
			background : #dbcfc2;
}
#header {
	position : relative;
	height : 60px;
	padding : 0;
	margin : 0;

}


#footer_outer {
	clear : both;
	background : #dbcfc2;
	margin:0;
	padding:0;
}
footer {
	padding : 0;
	margin : 0 auto;
}
#footertitle_outer{
	background:#4A2F24;
}

@media screen and (min-width : 1000px) {
#wrapper {
}
header {
	height : 60px;
}
#container_outer {
}
#container {
}
main {
}
footer {
	padding : 10px 0;
}
#footertitle {
	padding : 10px 0;

}
}
/*--------------------------------------------------------------------------------------------------------------------
■ヘッダ header
--------------------------------------------------------------------------------------------------------------------*/
#google_eyecatch {
	visibility : hidden;
	height : 0;
}
#header #sitename {

	font-weight : bold;
	line-height : 50px;
}
#header #sitename.sitelogo {
		padding : 2px 0 8px 0;
	margin : 2px 0 0 10px;
}
#header #sitename.sitelogo img {
	max-height : 40px;
}
#header_right {
	display : none;
}
#rndimage {
	display : none;
}
@media screen and (min-width : 1000px) {
    /* 1. 親の#headerを幅いっぱいに */
    #header {
        width: 100%;
        height: 60px;
    }

    /* 2. ここで1200px制限と中央寄せ、横並び（flex）を設定 */
    .header_inner {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;        /* これでロゴと説明文が横に並ぶ */
        align-items: center;  /* これで上下の真ん中に揃う */
    }

    /* 3. ロゴの設定（古いfloatは消してスッキリ） */
    #header #sitename {
        margin: 0 0 0 10px;
        padding: 0;
        line-height: 50px;
    }
    #header #sitename a {
        color : var(--color-01);
    }

    /* 4. 説明文の設定（ここもfloatを消して調整） */
    #header_right,
    #header_right h1.description {
        display: block;
        padding: 0;
        margin: 0 0 0 20px;   /* ロゴとの間に20pxの隙間 */
        font-size: 0.9em;
        line-height: 50px;
    }
}
/*--------------------------------------------------------------------------------------------------------------------
■スマホボタン mobile_set
--------------------------------------------------------------------------------------------------------------------*/
button#mobile_menu_bttn {
	display : block;
	position : fixed;
	z-index : 1000;
	top : 0;
	right : 0;
	padding : 0;
	margin : 0;
	width : 60px;
	height : 60px;
	border : none;
	box-shadow : none;
	background : url(./images/menu.png);
	background-size : contain;
	text-indent : -9999px;
}
button#mobile_menu_bttn.close {
	background : url(./images/menu_off.png);
}
/*--------------------------------------------------------------------------------------------------------------------
■スマホメニュー Mobile_menu
--------------------------------------------------------------------------------------------------------------------*/
#mobile_menu {
	display : none;
}
#mobile_menu {
	position : fixed;
	align-items : center;
	-webkit-transform : translateZ(0);
	z-index : 500;
	top : 60px
	right : 0;
	bottom : 0;
	left : 0;
	width : 100%;
	height : calc(100vh - 60px);
	background : #fff;
}
#mobile_menu ul {
	position : relative;
	z-index : 500;
	width : 100%;
	height : 200px;
	overflow : auto;
	top : 50%;
	-webkit-transform : translate(0 , -100px);
	-moz-transform : translate(0 , -100px);
	transform : translate(0 , -100px);
	-webkit-overflow-scrolling : touch;
}
_::-webkit-full-page-media, _:future, :root #mobile_menu ul.menu {
}
#mobile_menu li {
	list-style : none;
	text-align : center;
}
#mobile_menu li a {
	display : block;
	padding : 0;
	line-height : 50px;
	color : var(--color-03);
}
#mobile_menu li li a {
	padding : 0;
}
#mobile_menu li a:hover {
	background : var(--color-02);
}
#mobile_menu li#mobile_searchform {
	padding : 0;
}
#mobile_menu li#mobile_searchform form#searchform {
	border : none;
}
/*--------------------------------------------------------------------------------------------------------------------
■コンテンツ
--------------------------------------------------------------------------------------------------------------------*/
.post p ,
.post ul ,
.post ol {
	margin : 0 0 0.5em 0;
}
.post ul ,
.post ol {
	padding : 0 0 0 2em;
}
.post ul li {
	list-style-type : disc;
}
.post ol li {
	list-style-type : decimal;
}
@media screen and (min-width: 1000px) {
p ,
.post ul ,
.post ol {
	margin : 0 0 1em 0;
}
}
/*----------------------------------------------------------
■必須・注意書き
----------------------------------------------------------*/
span.require,
span.caution {
	font-size : 1em;
	color : var(--color-08);;
}
p.attention {
	border : 2px solid var(--color-08);
	padding : 0.5em;
	color : var(--color-08);
}
/*--------------------------------------------------------------------------------------------------------------------
■フッター
--------------------------------------------------------------------------------------------------------------------*/
/*#footer02 table * {
	border : none;
}
#footer02 table {
	border-top : 1px solid #333;
}
#footer02 table td {
	border-bottom : 1px solid #333;
	padding : 5px 0;
}*/


#footer01 img{
	display:block;
	width:400px;
	margin:0 auto 10px auto;
	}



@media screen and (min-width: 1000px) {
footer {
	display : flex;
}
#footer01 {
	width :40%;
}
#footer02 {
	width : 58%;
}
}
/*--------------------------------------------------------------------------------------------------------------------
■フッターSEO対策
--------------------------------------------------------------------------------------------------------------------*/
#footertitle p,
#footertitle a,
#footertitle h1,
#footertitle h1 a {
	color : var(--color-02);;
	font-weight : normal;
	font-size : 70%;
	line-height : 1.2em;
}
#footertitle .copy{
	width:100%;
	font-size:13px;
	line-height:1.2em;
	text-align:center;
	color:#FFF;
	}

/*--------------------------------------------------------------------------------------------------------------------
■page_top　ページトップ
--------------------------------------------------------------------------------------------------------------------*/
#foot_nav {
	position : initial;
	display : block;
	bottom : auto;
	left : auto;
	right : auto;
	height : auto;
}
#foot_nav li {
	width : auto;
}
#foot_nav a#page_top {
	position : fixed;
	display : block;
	background : #a4cf6d;
	text-align : center;
	color : #fff;
	font-size : 14px;
	width : 60px;
	right : 20px;
	bottom : 20px;
	border-radius : 6px;
	padding : 5px 0;
	line-height : 10px;
}
#foot_nav a i {
	margin : 0 0 0 0;
	font-size : 30px;
	line-height : 30px;
}
#foot_nav a:hover {
	background : #fd7500;
}
/*--------------------------------------------------------------------------------------------------------------------
■テーブル
--------------------------------------------------------------------------------------------------------------------*/
/*table {
	width : 100%;
	margin : 0 0 0.5em 0;
	border-collapse : collapse;
	border-spacing : 0;
}
table th,
table td {
	margin : 0;
	padding : 0.25em;
	border-collapse : collapse;
	border : 1px solid #999;
	border-spacing : 0;
	vertical-align : top;
}
table th p ,
table td p {
	margin : 0;
}*/

@media screen and (min-width: 1000px) {
/*table th,
table td {
	padding : 0.5em;
}*/
}

/*--------------------------------------------------------------------------------------------------------------------
■vegas slider
--------------------------------------------------------------------------------------------------------------------*/
#vegasslider {
	position : absolute;
	width : 100%;
	height : 100vh;
}


/*フッターテーブル*/
.f_logo{
}
.f_logo img{
	display:inline-block;
}
.f_logo h2.f_midasi{
	font-size:15px;
	line-height:15px;
	margin:0;
	padding:12px;
}


table.f_tbl{
	border-collapse: collapse;
	width: auto;
	border-top: 1px dotted #4A2F24;
	border-bottom: 1px dotted #4A2F24;
margin: 0 0 20px 0;
	padding:18px 0;
}
table.f_tbl td{
 font-size:14px;
 line-height:1.2em;
 	text-align: left;
	padding:4px;
	vertical-align: top; 
}
table.f_tbl p{
	margin:0;
	padding:0;
}


table.f_tbl th{
	 font-size:14px;
 line-height:1em;
	padding:4px;
	font-weight: bold;
	text-align:left;
 vertical-align: middle;
 width:30%;
}
table.f_tbl tr{

}

@media only screen and (min-width: 400px) {
	table.f_tbl{
	margin:0 16px 20px 16px;
}

	}

.gmap{
	width:800px;
	margin:30px auto;
}

@media only screen and (max-width: 800px) {
	.gmap{
		width:100%;
	}
	}


#cvp{
	font-size:110%;
	text-align:left;
	line-height:1.5em;
		width:600px;
	margin:0 auto;
	font-weight:bold;
}





h2.cvp_h2{
	font-weight:700;
		font-size:120%;
	text-align:center;
	margin-bottom:8px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#cvp .home_logo{
	width:190px;
	margin:0 auto 8px auto;

}
#cvp .home_logo img{
	display:block;
	width:190px;
	height:auto;
}

@media only screen and (max-width: 600px) {
	
	#cvp{
			width:100%;
	margin:-48px auto 0 auto;
	font-weight:500;
	font-size:100%;
	text-align:left;
	line-height:1.4em;
}

#cvp .home_logo{
	width:130px;
	margin:0 auto 8px auto;

}

	}


h3.sub{
	font-weight:700;
		font-size:80%;
		line-height:1em;
	text-align:center;
	margin:40px auto 12px auto;
	padding:4px 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background:#dbcfc2;
border-radius:10px;
clear:both;
}

.cc_txt{
		margin:20px 0;
	font-size:16px;
	line-height:1.5em;
	text-align:center;
}

h4.honbun {
	font-size:20px;
	line-height:1.2em;
	padding : 20px 0 8px 70px;
	margin : 10px 0 10px 0;
	background : url(./images/uma002.png) left bottom no-repeat;
	border-bottom : 2px solid #7AB625;
	font-weight : bold;
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		clear:both;
}


/*当牧場の特長*/

#tokucho{
	font-size:70%;
	line-height:1.2em;
}
#tokucho dl dt{
	margin:0 0 6px 0;
}

@media only screen and (max-width: 480px) {
	#tokucho dl{
	margin:0 0 20px 0;
}
	
	}


.box{
	clear:both;
	margin:20px 0;
	font-size:16px;
	line-height:1.5em;
}
.prof{
	width:70%;
	clear:both;
	margin:30px auto;
	font-size:16px;
	line-height:1.5em;
}
@media only screen and (max-width: 480px) {
.prof{
	width:100%;
	clear:both;
	margin:30px 0;
	font-size:16px;
	line-height:1.7em;
}	
	}

.box p{
	margin-botom:0.5em;
}
.photoL{
	display:block;
	width:40%;
	float:left;
	margin:0 10px 0 0;
}
.photoR{
	display:block;
	width:40%;
	float:right;
	margin:0 0 0 10px;
}

@media only screen and (max-width: 480px) {
	
.photoL{
	display:block;
	width:100%;
	float:none;
	margin:0 0 10px 0;
}
.photoR{
	display:block;
	width:100%;
	float:none;
	margin:0 0 10px 0;
}	
	}

#toi a{
	display:block;
	width:200px;
	border:2px solid #7AB625;
	font-size:14px;
	font-weight:700;
	padding:10px 4px;
	text-align:center;
	background:#FFF;
	margin:40px auto;
}
#toi a:hover{
	background:#f4ffe5;
}

.f_link{
	font-size:14px;
	text-align:center;
}

img.jac{
	width:400px;
	display:block;
	margin:0 auto 32px auto;
}
@media only screen and (max-width: 480px) {
	img.jac{
	width:300px;
	display:block;
	margin:0 auto 32px auto;
	height:auto;
}
	
}





#container_outer {
    clear : both;
    padding : 0; 
    margin : 0;
}

/* -------------------------------------------
   2. ヘッダー（スクロールしても固定する）
   ------------------------------------------- */
header {
    /* 画面上部に固定 */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* ヘッダーの高さ */
    z-index: 1000; 
}
/*---------------------------------
■HOME ホーム　home_main
-*/
#home_main {
    margin:60px auto; 

    width: 100%;
		    max-width:1200px;
  overflow: hidden;
    
}

#home_main img {
    width: 100%;
    height:auto;

}
@media only screen and (max-width: 460px) {
	#home_main {
    margin-bottom:0 !important;
	}
	}
/* =========================================
   見出し（h2）の共通デザイン：制服
   ========================================= */

.section-title {
    /* --- ▼ ここが魔法の記述！ ▼ --- */
    /* 親要素の幅を無視して、画面幅(Viewport Width)いっぱいにする設定 */
    width: 100vw; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* --- ▲ 魔法ここまで ▲ --- */

    /* 文字の設定 */
    text-align: center;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 32px;
    
    /* 高さや余白の設定 */
    height: 200px;
    padding-top: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    
    /* 背景画像の共通設定 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

/* PCサイズの時の余白調整 */
@media screen and (min-width: 1000px) {
    .section-title {
        margin-top: 50px;
        margin-bottom: 50px;
    }
	#home_main {
padding:8px;

    
}
}
/* =========================================
   見出しの中のアイコン設定（PC・基本）
   ========================================= */
h2.section-title img.icon{
    display: block;            /* 改行させる */
    margin: 0 auto 2px auto;  
    height: auto;              /* 高さは自動 */
    
    /* PCでのアイコンサイズ */
    width: 100px;               
}

/* =========================================
   スマホの時のアイコン調整
   ========================================= */
@media screen and (max-width: 768px) {
    h2.section-title img.icon {
        /* スマホでは少し小さくする */
        width:70px;           
        
        /* 隙間も少し狭くする */
        margin-bottom: 0px;   
    }
}
/* =========================================
   各見出しの背景画像設定：名札
   ※画像のファイル名は実際のファイル名に書き換えてね！
   ========================================= */

/* 1. お食事処 */
#food {
    background-image: url(./images/zen/h2_bg5.jpg); 
}

/* 2. 豆腐お取り寄せ */
#tofu {
    background-image: url(./images/zen/h2_bg4.jpg);
}

/* 3. 白蛇伝説 */
#snake {
    background-image: url(./images/zen/h2_bg.jpg);
}

/* 4. 寺院 */
#temple {
    background-image: url(./images/zen/h2_bg3.jpg);
}

/* 5. 周辺観光 */
#sightseeing {
    background-image: url(./images/zen/h2_bg7.jpg);
}

/* 6. アクセスマップ */
#access {
    background-image: url(./images/zen/h2_bg2.jpg);
}

.intro{
	width:600px;
	margin:48px auto;
}
@media only screen and (max-width: 600px) {
.intro{
	width:100%;
	margin:48px auto;
}
}

/* --------------------------------------------------
   メインコンテンツの幅調整（800px版）
-------------------------------------------------- */

/* 1. スマホの時の設定（基本）〜767pxまで */
main {
    width: 100%;             /* 横幅いっぱい */
    padding: 30px 8px;       /* 上下30px、左右8pxの余白 */
    box-sizing: border-box;  /* 余白を含めてサイズ計算 */
    margin: 0 auto;          /* 真ん中寄せ */
}

/* 2. タブレット・小さいPCの時の設定（768px 〜 999px） */
@media screen and (min-width: 768px) {
    main {
        width: 80%;          /* 画面の80%の幅 */
        padding: 30px 0;     /* 左右の余白はなし（幅80%で十分だから） */
		margin-top:-24px;
    }
}

/* 3. PCの時の設定（1000px以上） */
@media screen and (min-width: 1000px) {
    main {
        width: 800px;       /* ★ここを1000pxから800pxに変更したよ！ */
        padding: 30px 0;
    }
}

/* 読み物用の回り込み設定 */
.photoL {
    float: left;
    margin: 0 20px 10px 0; /* 右と下にしっかり隙間を作る */
    max-width: 40%;        /* 画像が大きすぎて文字が消えないように制限 */
    height: auto;
}

.photoR {
    float: right;
    margin: 0 0 10px 20px; /* 左と下にしっかり隙間を作る */
    max-width: 40%;
    height: auto;
}

/* スマホでは回り込ませず、真ん中にドン！と置く */
@media screen and (max-width: 767px) {
    .photoL, .photoR {
        float: none;
        display: block;
        margin: 10px auto;
        max-width: 100%; /* スマホでは横幅いっぱい */
    }
}


/* --- スマホ：縦並び --- */
.txt {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 15px;              /* 画像と文字の間の隙間 */
    margin-bottom: 30px;
}

.txt img {
    width: 100%;            /* スマホでは横幅いっぱい */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- PC（768px以上）：横並び --- */
@media screen and (min-width: 768px) {
    .txt {
        flex-direction: row;    /* 横に並べる */
        align-items: flex-start; /* 上揃え */
        gap: 20px;              /* 画像と文字の間の隙間 */
    }

    /* 画像のサイズを固定、または比率で制限 */
    .txt img {
        width: 300px;           /* お好みのサイズで固定 */
        flex-shrink: 0;         /* 画像が文字に押されて小さくならないように固定 */
    }
}

/* 地図や動画などの埋め込みコンテンツがはみ出さないようにする */
iframe {
    max-width: 100%;
    box-sizing: border-box;
}
/* --- 横揺れ防止セット --- */

/* 1. サイト全体からはみ出したものを隠す */
body, #wrapper {
    overflow-x: hidden;
}

/* 2. 地図や動画が画面からはみ出さないようにする */
iframe {
    max-width: 100%;
}

.kakomi{
	border:1px solid #990;
	font-weight:bold;
	padding:8px;
	margin:16px 0;
	width:100%;
	text-align:left;
	background:#FFF;
}

@media screen and (min-width: 768px) {
	.kakomi{
	margin:48px 0;
	width:100%;
	text-align:center;
}
}