@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: background-color: #faf6ed;;
    --link-color: #666;
    --linkhover-color: #999;
    --back-color: #f7f7f7;
    --border-color: #ccc;
    --white-color: #fff;
    --nav-color: #333;
}
body {
    background: var(--white-color); 
    color: var(--base-color);
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}

/*トップ表示
-------------------------------------*/
.anime_wrap{
    position: relative;
    overflow: hidden;
}
.anime_wrap p{
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 40px;
    font-weight: bold;
}

.pattern6::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    z-index: 2;
    transition: .5s;
}
.pattern6.show::before{
    transform: translateX(100%);
}
.pattern6 img{
    opacity: 0;
    transition: .5s;
}
.pattern6.show img{
    opacity: 1;
}
.pattern6 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
    z-index: 1;
    overflow: hidden;
}
.pattern6.show p{
    opacity: 1;
    transform: translateX(0);
}
.pattern6 p::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    transition: .5s;
    transition-delay: 1s;
}
.pattern6.show p::before{
    transform: translateX(100%);
}


.pattern7::before,
.pattern7::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.pattern7::before{
    background: #FFF;
    z-index: 3;
    transition: 1s;
}
.pattern7::after{
    background: #991e23;
    z-index: 2;
    transition: 1s;
    transition-delay: .5s;
}
.pattern7.show::before,
.pattern7.show::after{
    transform: translateY(100%);
}
.pattern7 img{
    opacity: 0;
    transform: scale(.8);
    transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-delay: .4s;
}
.pattern7.show img{
    opacity: 1;
    transform: scale(1);
    padding: 1rem;
}
.pattern7 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: 1.2s;
    transition-delay: .8s;
    z-index: 1;
    overflow: hidden;
}
.pattern7.show p{
    opacity: 1;
    transform: translateX(0);
}

.pattern8::before,
.pattern8::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.pattern8::before{
    background: #FFF;
    z-index: 3;
    transition: 1s;
}
.pattern8::after{
    background: #991e23;
    z-index: 2;
    transition: 1s;
    transition-delay: .5s;
}
.pattern8.show::before,
.pattern8.show::after{
    transform: translateY(100%);
}
.pattern8 img{
    opacity: 0;
    transform: scale(.8);
    transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-delay: .4s;
}
.pattern8.show img{
    opacity: 1;
    transform: scale(1);
    margin-top: 1em;
    width: 70%;
}
.pattern8 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: 1.2s;
    transition-delay: .8s;
    z-index: 1;
    overflow: hidden;
}
.pattern8.show p{
    opacity: 1;
    transform: translateX(0);
}

.winered{
	background-color: #991e23;
    margin-bottom: -4rem;
    text-align: center;
}

.winered_2{
	background-color: #991e23;
	text-align: center;
}

h2 {
    position: relative;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    text-align: center;
    font-size: 5rem;
}

.button {
    margin: 1rem;
}

.catch-1{
	font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','Yu Gothic UI','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','ＭＳ ゴシック',sans-serif;
	position: absolute;
	top: 50%;
	right: 30%;
    text-align: right;
    color: #FFF;
    background-color: #1a73e89e;
    display: inline-block;
    padding: 0;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff;
    font-weight: 600;

}

.catch-2{
	font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','Yu Gothic UI','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','ＭＳ ゴシック',sans-serif;
	position: absolute;
	top: 70%;
	right: 0;
    text-align: right;
    color: #FFF;
    background-color: #1a73e89e;
    display: inline-block;
    padding: 0;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff;
    font-weight: 600;

    
}


/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
    margin-bottom: 2rem;
}
.sitetitle {
    font-size: 3.0rem;
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}
.contact-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    width: 200px;
    font-size: 16px;
    text-decoration: none;
    background-color: var(--link-color);   
    color: var(--white-color);
    box-shadow: 1px 1px var(--base-color);
}
.contact-button::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--white-color);
    border-right: 2px solid var(--white-color);
    transform: rotate(45deg);
}
.contact-button:hover {
    opacity: 0.9;
    color: var(--white-color);
}
/*スマホ用メニュー
-------------------------------------*/	
.spnavi {
    display: none;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: var(--back-color);   
}
nav a {
    padding: 0.5rem;
    color: var(--nav-color);
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 25px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 25px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 25px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
    
/*メイン画像
-------------------------------------*/
#mainimg {
    width: 100%;
}
#mainimg h1 {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2;
    text-align: center;
    color: var(--white-color);
    text-shadow: 1px 2px 3px var(--link-color); 
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 0 0;
}
section {
	margin: 1rem 0;
	padding: 3rem 0;
}
.gray-back {
	background-color: var(--back-color);
    /*background: url('../img/gray-back.jpg'); gray-back.jpg背景画像を使用したい時にオンにしてください*/
    background-size: cover;
}

/*ニュース
-------------------------------------*/
.news {
    margin: 0 auto;
    max-width: 980px;
    padding: 2rem;
}
.news-list{
    list-style: none;
  }
.news-list .item, .item p {
    margin-bottom: 0;
  }
.news-list .item a{
    display: flex;
    flex-wrap: wrap;
    color: var(--nav-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
}
.news-list .item:first-child a{
    border-top: 1px solid var(--border-color);
}
.news-list .item .date{
    min-width: 120px;
    color: var(--link-color);
}
.news-list .item a:hover .title{
    color: var(--base-color);
}

/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
    line-height: 1.7;
}
.center {
	text-align: center;
	margin-bottom: 4rem;
}

/* Googleマップ
-------------------------------------*/
.gmap {
	margin: 3rem 0;
}

/*フッター
-------------------------------------*/
footer {
    background-color: var(--back-color); 
    /*background: url('../img/gray-back.jpg'); gray-back.jpg背景画像を使用したい時にオンにしてください*/
    background-size: cover;
    padding: 5rem 0;
}
footer h4 {
    position: relative;
    padding-bottom: 1rem;
    width: 100%;
    border-bottom: 2px solid var(--border-color);
}
footer h4::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 70px;
    height: 2px;
    background-color: var(--link-color);
}
/*電話
-------------------------------------*/
a.tel {
    display: inline-block;
}
a[href*="tel:"] { /* PC時は電話番号無効 */
    pointer-events: none;
    cursor: default;
}
/*お問い合わせ
-------------------------------------*/
.contact-box {
	border: 1px solid var(--border-color);
	text-align: center;
	padding: 2rem 0;
}
.table {
	margin: 4rem 0;
}
.table th {
	width: 150px;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { 
    background-color: var(--white-color);
}
/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--link-color);
}
.copyright a {
    color: var(--white-color);
    text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: block;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background: var(--white-color);
    border: 1px solid var(--linkhover-color);
    padding-top: 30px;
    text-align: center;
    text-decoration: none;
    opacity: 0.8;
}
#pagetop::after{
    content: "";
    display: block;
    border-top: 2px solid var(--base-color);
    border-right: 2px solid var(--base-color);
    width: 25%;
    height: 25%;
    top: 45%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
}
#pagetop:hover{
    opacity: 0.5;
}

/* 下層ページヘッダー
-------------------------------------*/
.subimg {
    height: 350px;
    background: url('../img/subimg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 2rem;
}
.subimg h1 {
    height: 350px;
    line-height: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
    text-shadow: 1px 2px 3px var(--link-color); 
    margin: 0;
}
/* パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: var(--link-color);
}

.emblem p{
	font-size: 1.2em;
}



/*エンブレム
-------------------------------------*/
.emblem {
    margin: 10px auto 20px auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 95%;
    gap: 0 9px;
    text-align: center;
}

.emblem .emblemArea {
    width: 300px;
}

.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}
 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*画像
-------------------------------------*/
.first{
	padding-left: 8%;
    padding-right: 8%;
	background-color: #faf6ed;
	
}

.second{
	padding-top: 5%;
    padding-bottom: 2%;
    padding-right: 18%;
    padding-left: 18%;
    background-color: #036eb8;
	
}


.third {
    padding-top: 5%;
    padding-bottom: 2%;
    padding-right: 18%;
    padding-left: 18%;
}

.third-child{
	display: -webkit-flex;
    display: flex;
}

.img-third{
	padding-top: 3%;
    padding-bottom: 2%;
}

.img-third-child{
	width: 15%;
    height: 15%;
    display: block;
    margin: auto;
}

div.rectangle {

  width: 0;
  height: 0;
  border-bottom: solid 5em transparent; /*だいたい1.73倍*/
  border-top:  solid 4em  #faf6ed;
  border-left: solid 3em transparent;
  border-right: solid 3em transparent;
  position: absolute;
  margin-left: 47%;
}

/*吹き出し
-------------------------------------*/
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
  z-index: 0;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #FFF;
  font-size: 16px;
  background: #ff8e9d;
  border-radius: 15px;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ff8e9d;
  z-index: 0;
}

.balloon2 p {
  margin: 0;
  padding: 0;
}

/*productの文字
-------------------------------------*/
p.product{
	padding: 15px;
	text-align: left;

}


h3.product {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5vw;
	text-align: center;
	color: #000;
	font-weight: bold;
}

span.red{
	color: red;
}


/*ボタン
-------------------------------------*/

.button_solid006 a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
    padding: 6px 25px;
    text-align: center;
    background: #6bb6ff;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    border-radius: 100px;
    box-shadow: 0 5px 0px #4f96f6, 0 10px 100px #4f96f6;
}
.button_solid006 a:hover{
  background:#FF2F2F;
  box-shadow: 0 5px 0px #B73434,0 7px 30px #FF2F2F;
}

.button_solid006 a:active{
  background:#FF8282;
  box-shadow: 0 0px 10px #FF8282;
  box-shadow: 0 5px 0px #CC6262,0 4px 10px #FF8282;
}
.contain{
	justify-content: center;
	display:flex;
}

.contain-2{
	justify-content: center;
	display:flex;
}

/* 文字スライダー
-------------------------------------*/
.flowing {
	width: 0;
	margin: 0;
	font-size: 3vw;
	font-weight: bold;
	color: #ff6347;
	white-space: nowrap;
	overflow: hidden;
	animation: flowing-anim 3s forwards linear;
}

@keyframes flowing-anim {
 0%{
     width: 0%;
   }
100%{
     width: 100%;
   }
}
/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box {
    display: none;
}	
/*スマホ用メニュー
-------------------------------------*/	
.spnavi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    text-decoration: none;
    background-color: var(--link-color);   
    color: var(--white-color);
}
.spnavi a {
    display: inline-block;
    color: var(--white-color);
}
.spnavi a:hover {
    opacity: 0.9;
    background-color: var(--link-color);   
    color: var(--white-color);
}
.spnavi::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--white-color);
    border-right: 2px solid var(--white-color);
    transform: rotate(45deg);
}

/*product文字
-------------------------------------*/	
h3.product {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 6.5vw;
	text-align: center;
	color: #000;
	font-weight: bold;
}

/*トップ画像文字
-------------------------------------*/	

.catch-1{
	font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','Yu Gothic UI','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','ＭＳ ゴシック',sans-serif;
	position: absolute;
	top: 57%;
	right: 20%;
    text-align: right;
    color: #FFF;
    background-color: #1a73e89e;
    display: inline-block;
    padding: 0;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff;
    font-weight: 600;
    font-size: 2rem;
}

.catch-2{
	font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','Yu Gothic UI','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','ＭＳ ゴシック',sans-serif;
	position: absolute;
	top: 70%;
	right: 0;
    text-align: right;
    color: #FFF;
    background-color: #1a73e89e;
    display: inline-block;
    padding: 0;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff;
    font-weight: 600;
    font-size: 2rem;    
}

/*メイン画像
-------------------------------------*/
#mainimg h1 {
    height: 350px;
}
/*ニュース
-------------------------------------*/
.news-list .item .title{
    margin-top: 1em;
}
/*お問い合わせ
-------------------------------------*/
.table th {
	width: 100%;
	display: block;
}	
.table td {
	display: block;
}

.emblem p{
	font-size: 1.3rem;
}

.emblem .emblemArea {
    width: 33.333%;
}

h2 {
    font-size: 2.5rem;
}
/*画像
-------------------------------------*/
div.rectangle {

  width: 0;
  height: 0;
  border-bottom: solid 1em transparent; /*だいたい1.73倍*/
  border-top:  solid 1.5em  #faf6ed;
  border-left: solid 1em transparent;
  border-right: solid 1em transparent;
  position: absolute;
}
.pattern8.show img{
    opacity: 1;
    transform: scale(1);
    margin-top: 1em;
    width: 95%;
}
.third {
	padding-top: 5%;
    padding-bottom: 2%;
    padding-right: 7%;
    padding-left: 7%;
}
/*ボタン
-------------------------------------*/
.button_solid006 a {
    width: auto;
}
.contain{
	justify-content: center;
	display:block;
}

.contain-2{
	justify-content: center;
	display:block;
}

}

/*カウントダウン
-------------------------------------*/
#CDT {
width: 100%;
text-align: center;
font-size: 7vw;
font-weight: bold;
color: #ffffff;
font-family: 'Noto Sans JP', sans-serif;}
#CDT01 {
width: 100%;
text-align: center;
font-size: 49px;
font-weight: bold;
color: #ffffff;
font-family: 'Noto Sans JP', sans-serif;
}

.ttl {
color: #ffffff;
font-size: 28px;
font-weight: 600;
text-align: center;
margin: 0;
line-height: 1.5;
}

.timer {
background: #d00000;
margin: 5px auto;
padding: 5px;
text-align:center;
width: 95%;
}

.timer h2{
font-size: 5vw;
color: #ffffff;
font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','Yu Gothic UI','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','ＭＳ ゴシック',sans-serif;
font-weight: 600;
margin-bottom: 0rem;
padding-bottom: 0rem;
}