/*
Theme Name: mignon
Author: fmignon
Description: Tokyo Theater Opera exclusive
*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&display=swap');
@charset "UTF-8";
@font-face {
  font-family: "logo_a";
  src: url("https://f-mignon.com/wp-content/themes/figaro/fonts/tempsttc.eot?")  format('eot'),
       url("https://f-mignon.com/wp-content/themes/figaro/fonts/tempsttc.woff2") format('woff2'),
       url("https://f-mignon.com/wp-content/themes/figaro/fonts/tempsttc.woff")  format('woff');
}
@font-face {
  font-family: "logo_b";
  src: url("https://f-mignon.com/wp-content/themes/figaro/fonts/pablo.eot?")  format('eot'),
       url("https://f-mignon.com/wp-content/themes/figaro/fonts/pablo.woff2") format('woff2'),
       url("https://f-mignon.com/wp-content/themes/figaro/fonts/pablo.woff")  format('woff');
}

@font-face {
  font-family: "navigate";
  src: url("https://f-mignon.com/wp-content/themes/figaro/fonts/GentiumBookBasic.eot?")  format('eot'),
       url("https://f-mignon.com/wp-content/themes/figaro/fonts/GentiumBookBasic.woff2") format('woff2'),
       url("https://f-mignon.com/wp-content/themes/figaro/fonts/GentiumBookBasic.woff")  format('woff');
}


body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height:1.7em;
	font-family: 'M PLUS 1p', sans-serif;
	font-size:14px;
	min-height: 100vh; /* これを追加 */
	position: relative; /* これを追加 */
	display:flex;
	flex-direction: column;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	scroll-behavior: smooth;
}

*, *:before, *:after {
            box-sizing: border-box;
}


.clearfix:after {
  content: ".";  
  display: block; 
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding:0;
	color: var(--color1);
    cursor: pointer;
    z-index: 999;
	font-size:48px;
	background:none;
	border:none;
}

textarea#comment {
	width:90%;
	border-radius:5px;
}

.indent {
	padding-left:3em;
}

@media screen and (min-width: 769px) { mobile { display:none;}}
@media screen and (max-width: 768px) { pc { display:none;}}
	
#wrapper {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#logo {
  padding: 20px 0 5px 15px;
}

#logo a {
	text-decoration:none;
	color:#fff;
	padding:0px 0 0 5px;
}

.logo_a { font-family:logo_a;}
.logo_b { font-family:logo_b;}

.logo1 { font-size:36px;}
.logo2 { font-size:24px;}


header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
	z-index:6;
	background: rgb(85,85,85);
	background: linear-gradient(0deg, rgba(0,90,90,1) 0%, rgba(80,180,180,1) 100%);
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
	background-attachment: fixed;
  z-index: 0;
}

body#toppage::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明の黒 */
  z-index: 0;
}


#container {
	padding-top:80px;
	position: relative; /* これを追加 */
  z-index: 2;
	flex: 1;
}

#content {
  position: relative; /* これを追加 */
  z-index: 3; /* これを追加 */
	max-width:1200px;
	margin:auto;
}

.adjust {
	max-width:1200px;
	margin:auto;
}

.t-con {
	color:#fff;
	z-index:4;
}


#mainVisual {
  text-align: center;
  padding: 25px 0 0 0;
}

#mainVisual h1 {
	font-size: 36px;
	line-height:1.5em;
	color: #fff;
}

@media screen and (max-width: 768px) {
#mainVisual h1 {
	font-size: 5vw;
	line-height:1.5em;
}
}

#serviceOverview {
  padding: 15px 5px;
}

#serviceOverview .service {
  margin-bottom: 20px;
}

#serviceOverview h2 a {
  font-size: 1.5em;
  color: #ff0;
  text-align: center;
  margin-bottom: 25px;
	border:none;
	text-decoration:none;
	display:block;
}


#serviceOverview p {
	text-align:center;
  color: #fff;
  line-height: 1.5;
}

.t-color {
	color: var(--color1);
}

h1, h1 a {
	font-size:18px;
	border-bottom:solid 1px #004364;
	padding-bottom:2px;
	margin:25px auto;
	width:98%;
	text-decoration:none;
	color:#333;
}

.blog-sub{
	font-size:14px;
}

.first-letter {	font-size:28px;}

#branch h2 {
	font-size:16px;
	border-left: 7px solid;
	border-image: linear-gradient(135deg, var(--color1), var(--color2)) 1;
	padding-left:5px;
	margin:30px auto;
	font-weight:400;
	letter-spacing:2px;
	width:96%;
}

h3 {
	font-size:16px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-image: linear-gradient(90deg, var(--color1), var(--color2)) 1;
	padding:7px 5px;
	margin:30px 0;
	font-weight:400;
	letter-spacing:2px;
	width:90%;
}

.catch-image{
	width:100%;
	text-align:center;
	margin:10px;
}

section p, .au-table-inner, .link1, .entry, .widget ul, #search-2, #screen-reader-text {
	width:90%;
	margin:auto;
}

.link1 p img {
	width:100%;
}

ul.link, ul.link2 {
	list-style: none;
	margin: 0 15px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

ul.link li, ul.link2 li{
	border-left: solid 7px #6c6c6c;
	padding: 7px;
	margin-bottom: 10px;
}

.service-flex {
	display:flex;
	justify-content:space-between;
}

#service-sidebar {
	width:250px;
}

#service-main {
	width: calc(100% - 270px);
}

@media screen and (max-width: 768px) {
	.service-flex {
	display:flex;
	flex-direction:column-reverse;
		flex-wrap:wrap;
}

#service-sidebar {
	width:100%;
}

#service-main {
	width: 100%;
}
}

ul.link li a, ul.link2 li a{
	text-decoration: none;
	color: #0000ff;
	border-bottom: solid 1px #000;
}


.au-table table {
	border-spacing: 0;
	border-radius: 10px;
	margin:auto;
	width:90%;
}

.au-table table th, .au-table table td {
	padding: 10px;
	border: 1px solid #aaa;
}

.au-table table th { white-space:nowrap}

.au-table table th {
	text-align: lrft;
	background:#ddd;
}

.vision {
	font-size:24px;
	line-height:1.8em;
}

@media screen and (max-width: 768px) {
.vision {
	font-size:18px;
	text-align:center;
	line-height:1.8em;
}
	
	.vision-later {
		display:block;
	}
}

.blog-wrap {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

.blog-main {
	width: calc(100% - 270px);

}

.blog-main h1 a{
	text-decoration:none;
	color:#555;
}

.entry_main img {
	height:auto;
}

.underbar {
    height: 10px; /* Adjust as needed */
    background: repeating-linear-gradient(
        125deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
	margin:30px auto 80px auto;
}

.sidebar {
	width:250px;
}

@media screen and (max-width: 768px) {
	.field-value input {
		width:90%;
		padding:5px;
	}
	
	.form-group {
		margin-top:25px;
	}
	.submit {
		padding:25px auto;
	}
	
	.blog-main, .sidebar {
		width:100%;
	}
}

.pp p {
	padding:0 3rem;
}

.link1 p{
	padding:1em 0;
}

 .red {
    color: red;
  }

ul.selector-example li:nth-child(odd) {
	border-bottom:solid dashed #888;
	background:#D6FFEB;
	padding:5px 0;
}

.css-code, .example-mark {
	display:inline-block;
}

.css-code code {
	font-weight:600;
}

.example-mark {
	white-space:nowrap;
	margin-left:2em;
}

@media screen and (max-width: 620px) {
	.css-code, .example-mark {
	display:block;
}
}

.navi {
	display:flex;
	justify-content:space-between;
	padding:15px 10px 30px 10px; 
}

.navi a {
	color:#039;
}

.sidebar ul li::before{
	font-family: "Font Awesome 6 Free";
  content: '\f101';
  font-size: 15px;
  font-weight: 900;
  margin-right: 7px;
  color:#f90;
}

.sidebar h2{
	color: var(--color1);
}

.sidebar a {
	text-decoration:none;
	color: var(--color1);
}

.sidebar a:hover {
	color: var(--color2);
	text-decoration:underline;
}

.comments-area {
	padding:5px;
}

.app-btn a {
	display:inline-block;
	padding:5px 25px;
	border-radius:30px;
	text-decoration:none;
	font-weight:600;
}

.app-red a{
	border:solid 3px #f00;
	color:red;
}

.app-green a{
	border:solid 3px #0e7500;
	color:#0e7500;
}

.app-btn a:hover {
	background:#eee;
}

.youtube-table{
	width:100%;
}

.youtube-table td {
	border:solid 1px #aaa;
	padding:5px;
	vertical-align:top;
}

.td2 {
	width:290px;
}

.td1 {
	width:calc(100% - 290px);
}
	
#footer {
	text-align:center;
	padding:15px 0 15px 0;

	color:#fff;
	position: relative;
	z-index: 4; /* これを追加 */
}

.four-zero-four {
	position:relative;
}

.four-1 {
	position:absolute;
	font-size:2.5vw;
	line-height:1.5em;
	color:yellow;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	font-weight:700;
	text-shadow:2px 2px 5px #333;
}

.four-2 {
	position:absolute;
	font-size:10vw;
	font-weight:900;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	color:#fff;
		text-shadow:2px 2px 5px #333;
}