@charset "utf-8";


/*------------------------------------------------
   Layout
------------------------------------------------*/
html{
}

body{
font-size:12px;
}

a{
color:#191970;
text-decoration:none;
outline:none;
}
a:visited{
color:#191970;
text-decoration:none;
}
a:active{
color:#6286b2;
text-decoration:none;
}
a:hover{
color:#ff7800;
text-decoration:none;
}/* 動画一覧：tableを使わないレスポンシブ配置 */
:root {
  --page-bg: #f3f1ec;
  --section-bg: #ffffff;
  --card-bg: #ffffff;
  --line: #d8d3ca;
  --line-dark: #b8b0a5;
  --text: #2f2c28;
  --subtext: #5f5a53;
  --accent: #6f1d1b;
  --shadow: 0 8px 24px rgba(40, 34, 28, 0.08);
}

body {
  background: var(--page-bg);
  color: var(--text);
}

/* 各動画セクションを白い面として明確に区切る */
.video-section {
  box-sizing: border-box;
  margin: 38px 0 46px;
  padding: 28px 30px 32px;
  background: var(--section-bg);
  border: 1px solid #e3dfd8;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.video-section > h4 {
  position: relative;
  margin: 0 0 24px;
  padding: 0 0 13px 18px;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}

.video-section > h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 5px;
  height: 1.35em;
  background: var(--accent);
  border-radius: 3px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.video-item {
  min-width: 0;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(40, 34, 28, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.video-item:hover {
  transform: translateY(-4px);
  border-color: var(--line-dark);
  box-shadow: 0 10px 22px rgba(40, 34, 28, 0.13);
}

.video-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text);
  text-decoration: none;
}

.video-item h2 {
  margin: 0;
  padding: 9px 9px 0;
  line-height: 0;
}

.video-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  background: #eeeae3;
}

.video-item em {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.3em;
  padding: 10px 12px 12px;
  color: var(--subtext);
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.video-item a:hover em {
  color: var(--accent);
}

/* 空の旧tableセル由来の項目は表示しない */
.video-item:has(h2:empty),
.video-item:has(h2:not(:has(img))) {
  display: none;
}

.pagetop {
  margin: -22px 4px 18px;
  text-align: right;
}

.pagetop a {
  display: inline-block;
  padding: 6px 11px;
  color: #5b554e;
  background: rgba(255,255,255,0.72);
  border: 1px solid #d9d4cc;
  border-radius: 999px;
  text-decoration: none;
}

.pagetop a:hover {
  background: #fff;
  color: var(--accent);
}

@media screen and (max-width: 739px) {
  .video-section {
    margin: 26px 0 34px;
    padding: 18px 14px 20px;
    border-radius: 8px;
  }

  .video-section > h4 {
    margin-bottom: 17px;
    padding-left: 14px;
    font-size: 1.06rem;
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .video-item h2 {
    padding: 6px 6px 0;
  }

  .video-item em {
    min-height: 3.7em;
    padding: 8px 7px 10px;
    font-size: 0.9rem;
  }

  .pagetop {
    margin-top: -16px;
  }
}


.video-page-intro {
  box-sizing: border-box;
  margin: 34px 0 10px;
  padding: 24px 28px;
  background: rgba(255,255,255,0.82);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
}
.video-page-intro h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.video-page-intro p {
  margin: 0;
  color: var(--subtext);
  line-height: 1.9;
}
@media screen and (max-width: 739px) {
  .video-page-intro { margin: 24px 0 8px; padding: 18px 16px; }
  .video-page-intro h2 { font-size: 1.12rem; }
}

#wrap{
background:#f4f2ee;
}

li{	line-height:2.5;

}


#ul .li {
list-style-position:
	inside; 
	}
	
#ul{	line-height:1.5;
font-size:14px;
	text-align:left;
	padding:0 10px 0 14px;
	}


#head{
padding:0;
}

#head h1 img{
width: 320px;
margin:0 10px;
}

	
#head nav{
margin:0 10px 10px 10px;
font-size:12px;
box-shadow:2px 2px 4px #b9b9b9;
border-radius:4px;
}

#head nav em{
font-size:12px;
color:#ff7800;
font-style: normal;
}

#head nav ul{
display:-webkit-box;
display:-moz-box;
width:100%;
padding:0;
background:#577F92;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-radius:4px;
}


#head nav ul li{
margin:0 6px 0 0;
padding:0 8px 0 0;
-webkit-box-flex:1;
-moz-box-flex:1;
background:url(../img/all_line01.png) no-repeat right center;
-webkit-background-size:1px auto;
background-size:1px auto;
}


#head nav ul li:last-child{
margin:0;
padding:0;
background:none;
}

#head nav ul li a{
display:block;
height:36px;
font-weight:bold;
color:#E5E5E5;
text-align:center;
text-decoration:none;
line-height:36px;
}


#head nav ul li a.on{
color:#069;
background:#DDF2F9;
border-radius:3px;
}

#head nav a{
color:#FFFFFF;
text-decoration:none;
outline:none;
}


#head nav a:visited{
color:#FFFFFF;
text-decoration:none;
}

#head nav a:active{
color:#ff7800;
text-decoration:none;
}

#head nav a:hover{
color:#ff7800;
text-decoration:none;
}

	
#head h2{
margin:0 0 5px 10px;
padding:0 0 0 4px;
font-size:12px;
font-weight:bold;
line-height:1;
border-left:#577F92 solid 4px;
}


#head h3{ 
margin:10px 0 5px 10px;
padding:0 0 0 4px;
font-size:12px;
font-weight:bold;
line-height:1;
border-left:#577F92 solid 4px;
}

#contents{
margin:5px 10px 5px 10px;
padding:5px 0 0 4px;
background:#FFFFFF;
-webkit-box-shadow:4px 4px 6px #bababa;
box-shadow:2px 2px 4px #bababa;

}

#contents h2{
margin:5px 0 5px 5px;
font-size:12px;
font-weight:bold;
	color:#6E6E6E;
line-height:1;
border-left:#577F92 solid 4px;
}


li{	line-height:2.5;

}



#contents-2{
margin:5px 10px 5px 10px;
padding:5px 0 0 4px;
background:#f4f2ee;
}

#contents-2 h2{
margin:5px 0 5px 5px;
font-size:12px;
font-weight:bold;
	color:#6E6E6E;
line-height:1;
border-left:#577F92 solid 4px;
}


#fmenu{
margin:0;
background:#f4f2ee;
border-radius:4px;
}


#fmenu .bluebtn{
margin:0 0 14px 0;
display:block;
width:100px;
height:18px;
padding:0 0 0  20px;
font-size:12px;
color:#fff;
text-decoration:none;
line-height:18px;
background:#7284A3 url(../img/all_arw02r.png) no-repeat 6px 3px;
-webkit-background-size:11px;
background-size:11px;
border-radius:3px;
}



#fmenu h3{
margin:0 0 15px 0;
padding:10px 0 5px 5px;
color:#565656;
text-align:left;
line-height:1.8;
font-weight:bold;
line-height:1;
text-shadow:2px 2px 4px #C0C0C0;
border-bottom:#7284A3 solid 1px;
font-size:14px;
	}


#fmenu h4{
margin:15px 0 0 15px ;
color:#565656;
text-align:left;
line-height:1.8;
font-weight:bold;
line-height:1;
text-shadow:2px 2px 4px #C0C0C0;
font-size:14px;
	}
	
	
#fmenu h5{
margin:10px 0 5px 10px;
font-size:14px;
text-align:left;
color:#565656;
line-height:2.5;
}


#fmenu h6{
margin:8px 0 0 0;
font-size:10px;
}



#fmenu section{
background: #708090;
margin:0 10px 20px 10px;
padding:0 0 14px 0;
-webkit-box-shadow:4px 4px 6px #bababa;
box-shadow:2px 2px 4px #bababa;
}

#fmenu section h4{
margin:10px 10px 20px 10px;
width: 95%;
text-align: center;
}

#fmenu section h4 img{
width:100%;
height: auto;
margin:15px 0 5px 0;
}

#fmenu section em{
margin:0 0 5px 10px;
padding:10px 0 5px 5px;
color:#565656;
line-height:1.5;
text-align:left;
font-style: normal;
font-size:14px;
	}
	
#fmenu section h3{
background: #708090;
margin:0 0 15px 0;
padding:10px 0 5px 5px;
color:#f4f2ee;
text-align:center;
line-height:1.2;
font-weight:bold;
line-height:1;
text-shadow:2px 2px 4px #394653;
border-bottom:#FFFFFF solid 1px;
font-size:16px;
	}
	
#fmenu section h2{
	margin:0 10px 20px 10px;
	padding:10px 0;
	color:#565656;
	text-align:center;
	line-height:1.8;
font-weight:bold;
text-shadow:2px 2px 4px #C0C0C0;
line-height:1;
border-bottom:#7284A3 solid 1px;
font-size:18px;
	}


#fmenu section p{
margin:0 5px 6px 5px;
font-size:14px;
color:#f4f2ee;
line-height:1.6;
}

#fmenu section p:after{
content:"";
display:block;
clear:both;
}

#fmenu section p img{
float:left;
width:30%;
height: auto;
margin:0 10px 6px 10px;
}

#fmenu section li{	
line-height:1.7;
font-size:16px;
color:#565656;
margin:0 0 5px 15px;
}

#fmenu section dl{
color:#565656;
font-size:14px;
line-height:1.6;
}

#fmenu section dl dt{
margin:0 0 0 5px;
width:80px;
text-align:right;
}

#fmenu section dl dd{
margin:-1.6em 10px 4px 0;
padding:0 0 4px 90px;
border-bottom:#BBCDD3 dotted 1px;
}


#fmenu section dl dd:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:none;
}

#fmenu aside{
background: #708090;
text-align:center;
margin:5px 10px 0 10px;
padding:0 0 10px 0;
-webkit-box-shadow:4px 4px 6px #bababa;
box-shadow:2px 2px 4px #bababa;
}

#fmenu aside iframe {
    border: 1px solid black;
    width: 280px;
	height: 230px;
	text-align: center;
	margin: 0 auto;
}

#fmenu aside p{
margin:0 5px 6px 5px;
color: #FFFFFF;
line-height:1.6;
font-size:14px;
}

#fmenu aside h4 {
margin:0 15px;
padding:0;
color:#565656;
width: 50%;
margin: 0 auto;
	}


#fmenu aside li{	
line-height:1.7;
color:#565656;
margin:0 5px;
}


#fmenu aside h2{
	margin:0 10px 10px 10px;
	padding:10px 0;
	color:#FFFFFF;
	text-align:center;
	line-height:1.8;
font-weight:bold;
text-shadow:2px 2px 4px #4d5a66;
line-height:1;
border-bottom:#FFFFFF solid 1px;
font-size:18px;
	}

#fmenu aside dl{
color:#565656;
font-size:14px;
line-height:1.6;
}

#fmenu aside dl dt{
margin:0 0 0 5px;
font-weight:bold;
text-align:left;
}

#fmenu aside dl dd{
margin:-1.6em 10px 4px 0;
padding:20px 0 4px 20px;
border-bottom:#BBCDD3 dotted 1px;
}

#fmenu aside dl dd:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:none;
}


#fmenu a{
color:#f4f2ee;
text-decoration:none;
outline:none;
}
#fmenu a:visited{
color:#f4f2ee;
text-decoration:none;
}
#fmenu a:active{
color:#f4f2ee;
text-decoration:none;
}
#fmenu a:hover{
color:#ff7800;
text-decoration:none;
}


#fmenu ul .li {list-style-position:
	inside; 
	}
	
#fmenu ul{	
padding:20px 10px 0 14px;
line-height:1.7;
font-size:16px;
color:#575757;
text-align:left;
	}

#fmenu .bluebtn{
margin:0 0 14px 0;
display:block;
width:100px;
height:18px;
padding:0 0 0  20px;
font-size:14px;
color:#fff;
text-decoration:none;
line-height:18px;
background:#7284A3 url(../img/all_arw02r.png) no-repeat 6px 3px;
-webkit-background-size:11px;
background-size:11px;
border-radius:3px;
}


.pagetop{
margin:0 10px 10px 10px;
text-align:right;
}

.pagetop a{
padding:0 15px 0 14px;
font-size:14px;
background:url(../img/all_arw01t.png) no-repeat left center;
-webkit-background-size:11px;
background-size:11px;
}

#foot{
margin:0 10px;
padding:10px 0 10px 0;
font-size:12px;
border-top:#577F92 solid 2px;
}

#foot nav{
}

#foot nav ul{
margin:0 0 10px 0;
text-align:center;
}

#foot nav ul li{
display:inline;
margin:0 10px 0 0;
}

#foot nav ul li a{
padding:0 0 0 14px;
background:url(../img/all_arw01r.png) no-repeat left center;
-webkit-background-size:11px;
background-size:11px;
}

#foot section{
padding:3px 10px;
background:#577F92;
border-radius:4px;
}

#foot section ul{
margin:0 0 5px 0;
list-style:none;
text-align:center;
}

#foot section ul li{
display:inline;
margin:0 10px 0 0;
}

#foot section ul li a{
padding:0 0 0 14px;
background:url(../img/all_arw01r.png) no-repeat left center;
-webkit-background-size:11px;
background-size:11px;
}

#foot section p{
text-align:center;
color:#FFF;
}
	

#foot section h4{
margin:0 0 0 0;
font-size:12px;
text-align:center;
color:#FFF;
}


/*------------------------------------------------
   Sitemap
------------------------------------------------*/
#sitemapArea{
margin:0 10px 0 10px;
display:-webkit-box;
display:-moz-box;
font-size:12px;
}

#sitemapArea em{
padding:0;
font-style: normal;
color:#ff7800;
}

#sitemapArea h2{
margin:0 0 10px 10px;
padding:0 0 0 5px;
font-size:14px;
font-weight:bold;
line-height:1;
border-left:#577F92 solid 4px;
}

#sitemapArea > ul{
list-style:none;
-webkit-box-flex:1;
-moz-box-flex:1;
}

#sitemapArea > ul > li{
margin:0 0 0 0;
}

#sitemapArea > ul > li > a,
#sitemapArea > ul > li > span{
padding:0 0 0 14px;
background:url(../img/all_arw01r.png) no-repeat left center;
-webkit-background-size:11px;
background-size:11px;
}

#sitemapArea ul li ul{
margin:0 0 0 10px;
list-style:none;
}

#sitemapArea ul li ul li{
margin:0 0 0 0;
}

#sitemapArea ul li ul li a{
padding:0 0 0 15px;
background:url(../img/all_arw03r.png) no-repeat left center;
line-height:2;
-webkit-background-size:11px;
background-size:11px;
}




/*------------------------------------------------
   Sitemap-2
------------------------------------------------*/
#sitemapArea-2{
width:100%;
margin:0 10px 0 10px;
display:-webkit-box;
display:-moz-box;
font-size:12px;
}


#sitemapArea-2 h2{
margin:5px 0 5px 5px;
padding:0 0 0 5px;
font-size:12px;
font-weight:bold;
line-height:1;
border-left:#577F92 solid 4px;
}




#sitemapArea-2 em{
padding:0;
font-style: normal;
color:#ff7800;
}


#sitemapArea-2 > ul{
list-style:none;
-webkit-box-flex:1;
-moz-box-flex:1;
}

#sitemapArea-2 > ul > li{
margin:0 0 0 0;
}

#sitemapArea-2 > ul > li > a,
#sitemapArea-2 > ul > li > span{
padding:0 0 0 14px;
background:url(../img/all_arw03r.png) no-repeat left center;
-webkit-background-size:11px;
background-size:11px;
}

#sitemapArea-2 ul li ul{
margin:0 0 0 0;
color:#ff7800;
list-style:none;
}

#sitemapArea-2 ul li ul li{
margin:0 0 0 0;
}

#sitemapArea-2 ul li ul li a{
padding:0 0 0 15px;
background:url(../img/all_arw03r.png) no-repeat left center;
line-height:2;
-webkit-background-size:11px;
background-size:11px;
}




/*------------------------------------------------
   Blue button
------------------------------------------------*/
#contents .bluebtn{
display:block;
width:80px;
height:18px;
padding:0 0 0 20px;
font-size:10px;
color:#fff;
text-decoration:none;
line-height:18px;
background:#7284A3 url(../img/all_arw02r.png) no-repeat 3px 3px;
-webkit-background-size:11px;
background-size:11px;
border-radius:3px;
}




/*------------------------------------------------
   Default
------------------------------------------------*/
.cf:after{
content:"";
display:block;
clear:both;
}