@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');

/*===============================================

 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
 ================================================*/
body {	font-size:15px;color:#333;line-height:1.7;background:#ffffff;
	font-family:'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;}

.inner {width:90%;margin:0 auto;}
.innerr {width:100%;margin:0 auto;}
.innerth {width:96%;margin:0 auto;margin-bottom:10em;}

header {width:100%;background:#008ed3;padding:10px 10px 0 10px;}

.summary {text-align: right;}
.summary img{width: 200px;}


.contents {overflow:hidden;width:96%;padding:2em 0;margin:0 auto;}
.content {overflow:hidden;width:96%;padding:2em 0;margin:0 auto;}

.out{padding:20px 15px;margin-bottom:1em;border-radius:6px;background:#fff;overflow:hidden;}

section.box {width:90%;padding:15px 20px;margin:13px 0;border:1px solid #ccc;border-radius:7px;overflow:hidden;font-size:95%;}

a {color:#333;text-decoration:underline;}
a:hover {color:#333;text-decoration:none;}


h1 {color:#fff;}

h2 {color:#fff;}

h3 {margin-bottom:0.25em;padding:2px 5px;}

h4 {}

h5 {font-size:170%;font-weight:bold;padding: 0.1em 3em; color: #161245; background: transparent;border-left: solid 5px #161245;}


h6 {  letter-spacing: 0.1em;position: relative;  padding-left: 25px;line-height:1.5;font-size:19px;}
h6:before {  position: absolute;  content: '';  bottom: -3px;  left: 0;  width: 0;
  height: 0;  border: none;  border-left: solid 15px transparent;  border-bottom: solid 15px rgb(119, 195, 223);}
h6:after {  position: absolute;  content: '';  bottom: -3px;  left: 10px;  width: 100%;  border-bottom: solid 3px rgb(119, 195, 223);}

h7 {margin-bottom:0.5em;padding:10px 0;font-size:150%;color:#0000ff;border-top:3px solid #7d7d7d;border-bottom:1px dotted #7d7d7d;}

h8 {position:relative;margin-bottom:0.7em;padding-left:2em;color:#161245;font-size:170%;font-weight:bold;}

.f01 {font-size:120%;color:#fff;}
.f02 {font-size:80%;color:#fff;line-height:1.3;padding:2px 5px;}
.f03 {font-size:110%;padding-top:1em;font-weight:bold;}
.f04 {font-size:110%;}
.f05 {font-size:115%;line-height:2;padding:0;margin:0;font-weight:bold;}
.f06 {font-size:100%;line-height:2;padding-bottom:1em;margin:0;font-weight:bold;}
.f07 {background: linear-gradient(transparent 70%, #acd0e2 70%);}
.f08 {font-size:100%;line-height:2;margin:15px 0;padding:0 2em;font-weight:bold;text-align: left;}
.f09 {display: block;font-size:80%;line-height:1.3;text-align: left;padding:0.2em 0 0.7em 0;margin:0;}


.tutub {font-size:20px;font-weight:bold;text-align: center;letter-spacing: 0.1em;line-height:1;margin:1em 0 0.5em 0;}
.tutu {font-size:13px;color:#808080;text-align: center;}

.mail {font-size:110%;text-align: center;line-height:2;padding-bottom:1em;font-weight:bold;}

p {margin:1em 0;}

.center{margin-right: auto;margin-left: auto;text-align: center;}
.right{font-size:70%;color:#808080;text-align: right;}

.ribbon{background:#151245;margin-right: auto;margin-left: auto;text-align: center;margin:40px 0 0 0;}

img {vertical-align:bottom;max-width:100%;height:auto;}

em {font-weight:bold;line-height:2;}
.fe {font-size:100%;line-height:2;padding:0;margin:0;font-weight:bold;}
.f1 {font-size:110%;padding-top:1em;}


.mb40 {margin-bottom:40px}

.photo {margin-:10px 0;}

.red {font-weight:bold;color:#ff0000;font-size:130%;}

.big {font-size:170%;text-align: center;line-height:1;}

.sma {color:#706a56;font-size:90%;text-align: right;font-weight:bold;margin-right:1em;}

.s {font-size:80%;letter-spacing: 0.1em;}
.sc {font-size:70%;letter-spacing: 0.1em;text-align: center;}

.tit {padding-top:2em;color: #ccc;  font-size: 220%;  text-transform: uppercase;  word-wrap:break-word;font-weight:bold;}


.contact {text-align: left;margin:15px 0;line-height:1.7;padding:0 2em;}
#img_big {display: none;}


.gd {padding: 2px 2rem;color: white;
background:-webkit-linear-gradient(to top, #b8751e, #a78202,#ffce08, #ffff91, #ffce08, #a78202, #b8751e);
        background:linear-gradient(to top, #b8751e, #a78202,#ffce08, #ffff91, #ffce08, #a78202, #b8751e);
 -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:bold;text-align: center;font-size:350%;}


/*================================================
background:-webkit-linear-gradient(to top, #a78202, #ffce08, #ffff91, #fefed0);
        background:linear-gradient(to top, #a78202, #ffce08, #ffff91, #fefed0);



.gd {padding: 2px 2rem;color: white;background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:bold;text-align: center;font-size:350%;}
 ================================================*/

.gdb {padding: 10px 2rem 20px 2rem;color: white;background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight:bold;font-size:400%; line-height:1;}


.gdd {background:-webkit-linear-gradient(to top, #a78202, #ffce08, #ffff91);
        background:linear-gradient(to top, #a78202, #ffce08, #ffff91);
    -webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-size:120%;}

/*================================================
.gdd {color: white;background-image:-webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
 -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:120%;}
 ================================================*/

.gds {padding: 2px 2rem;color: white;background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight:bold;text-align: center;font-size:150%; }


.gdss {color: fefba5;background-image: -webkit-linear-gradient(315deg, #b57118 0%, #fdcb00 37%, #fefe9b 37%, #f8f8c5 50%, #ffffb4 53%, #e1ce08 43%, #b06c13 100%);background-image: linear-gradient(135deg, #b57118 0%, #fdcb00 37%, #fefe9b 47%, #f8f8c5 40%, #ffffb4 53%, #e1ce08 63%, #b06c13 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight:bold;text-align:left;font-size:120%; }


dt {margin-bottom:0.5em;border-bottom:1px dotted #ddd;}
dt:before {content:"\0025a0";}
dd {margin-bottom:1em;}

.bg0 {background:#fff;padding:1em 1em;}/* ウェルカム */
.bg000 {margin:5em 0 10em 0;	padding: 1em 0;background-color: #fff;background-image:url(images/bg00.png);background-size:contain;background-repeat: no-repeat;background-position:top left;}

.bg0000000 {background: url(images/bg00.png)  no-repeat top left;  background-attachment: fixed;  background-size: contain;height:100%;margin:0 0 1em 0; padding: 4em 0;}


.bg00 {
  clip-path: inset(0);
  width: 100%;
  margin: :0 0 1em 0;
  padding: 4em 0;
  text-align: center;
  &:before {
    content: "";
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("images/bg00.png"); 
    background-size: contain; 
    background-repeat: no-repeat;
  }
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: strict;
}



.background {background: url(images/backfix.jpg) repeat-y  center top;
background-size:contain;}



.bg1 {background:  url(images/bg.png) no-repeat right top;padding:1em 0 1em 0;text-align: right;}
.bg2 {background: url(images/bg.png) no-repeat left top;padding:1em 0 1em 0;text-align: left;}
.bg3 {background: url(images/bgs.png) no-repeat left top;padding:1em 0 0 0;text-align: left;}
.bgtop2 {background:#fff url(images/main2.png) no-repeat center top;text-align: center;;padding:3em 0 7em 0;background-size:cover;}
.bgtop {background: url(images/main2.png) no-repeat center top;text-align: center;padding:16em 0 25em 0;background-size:contain; width:100%;}

.bg6 {width:96%;margin:0 auto;background: #fff;padding:1.5em 0 ;text-align: center;}


.bg7 {background: #008ed3 url(images/one_bg.jpg) repeat;padding-bottom:1em;}/* 一言 */
.bg8 {background: url(images/bg8.png) repeat-x center top;padding-top:10em;}/*間のグラデ */
.bg9 {background:#161245 url(images/bg9.png) repeat-x center top;padding-top:4em;}/*COMPANY PROFILE */

.alignleft{float:left;clear:left;margin:0 15px 5px 0;clear: both;}
.alignright{float:right;clear:right;margin:0 0 5px 15px;clear: both;}
.clear{clear:both;}

.backgroundtop {  background-image: url('images/topfix.jpg');  background-attachment: fixed;  background-size: contain; width:100%;  background-position: center bottom;padding-bottom: 4em;}


.box3 {padding: 0.5em 2em;margin: 0;color: #2c2c2f;background: rgba(255,255,255,0.5);}
.box3 p {margin:0.5em 0; padding:0.5em 0;}



/*================================================
 *  ふわふわ
 ================================================*/

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(images/totop.png) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 70px;
  height: 70px;
  margin-top: 15px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}



/*================================================
 *  画像の上に文字
 ================================================*/
.imagupt { position: relative;}
.imagupt p {  position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);transform: ranslate(-50%,-50%);margin:0;padding:0;color: black;}
.imagup img {width: 100%;filter: brightness(0%); }



/*================================================
 *  テーブル
 ================================================*/
table.table{  border-collapse:collapse;padding:20px 15px;margin-bottom:80px;border-radius:6px;overflow:hidden;margin-bottom:2em;color:#ffffff;margin: auto;}
table.table th,table.table td{  padding:15px 0;}
table.table td{  padding-left:15px;text-align:left;}
table.table th{  text-align:right;padding:10px 0;padding-right:10px;font-weight:bold;letter-spacing:1px;white-space:nowrap;border-bottom:2px solid  #b8751e;}
.ta {text-align: center;margin:15px 0;line-height:1.3;color:#fff;}


@media only screen and (max-width:640px){
.table { margin: 0 -10px; }
table.table th{ border-bottom:1px solid  #b8751e;}
table.table td{ ;padding-top:5px;padding-bottom:20px;text-align:center;}
.table th,.table td{width: 100%;display: block;border-top: none;padding-left:10px;}
table.table th{text-align:center;font-size:110%;padding:5px 0; }
}




/*================================================
 *  画像の上に文字　ホバー
 ================================================*/
.image-container3 {
    overflow: hidden;
    position: relative;
}

.image-container3 img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.overtex {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    color: #fff;
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* 初期状態で縮小 */
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0; /* 初期状態では透明 */
}

.over {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(0); /* 初期状態で縮小 */
    opacity: 0; /* 初期状態では透明 */
}

.image-container3:hover .over {
    transform: scale(1); /* ホバー時にズームイン */
    opacity: 1; /* ホバー時に表示 */
}

.image-container3:hover .overtex {
    transform: translate(-50%, -50%) scale(1); /* ホバー時にズームイン */
    opacity: 1; /* ホバー時に表示 */
}






/*================================================
 *  フッター
 ================================================*/
.gridWrapper{padding:20px 0;overflow: hidden;}
#footer{clear:both;padding:2em 0;text-align:left;text-align:center;color:#fff;font-size:80%;margin-tpp:2em;}
#footer .grid p{padding:1em;}
#footer .tel strong{font-size:110%;font-weight:bold;}
#footer .logo{text-align:left;}


/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {position:fixed;	bottom:20px;right:20px;}
.totop a {display:block;text-decoration:none;}
.totop img {}
.totop img:hover {opacity: 0.6 ;}




/*================================================
 *  2カラム
 ================================================*/
.col_two_one {overflow:hidden;margin-bottom:1em;}
.col_two_one ul {overflow:hidden;margin-right:-2%;}
.col_two_one li {list-style:none;float:left;width:48%;margin:0 2% 1% 0;text-align:left;}
.col_two_one li:nth-child(2n+1) {clear:both;}
.col_two_one li img {max-width:100%;height:auto;}


/*================================================
 *  3カラム
 ================================================*/
.threeCol {overflow:hidden;padding:3em 0 0 0;}
.threeCol ul {overflow:hidden;margin-right:-2%;}
.threeCol li {list-style:none;width:31%;float:left;margin:0 2% 2% 0;}
.threeCol li:nth-child(3n+1) {clear:both;}
.threeCol li img {max-width:100%;height:auto;margin-bottom:0.5em;}

/*================================================
 *  4カラム
 ================================================*/
.fourCol {overflow:hidden;padding:4em 0 1em 0;}
.fourCol ul {overflow:hidden;margin-right:-2%;}
.fourCol li {list-style:none;width:25%;float:left;float:left;margin:0;}
.fourCol li:nth-child(4n+1) {clear:both;}
.fourCol li img {max-width:100%;height:auto;}



/*================================================
 *  4カラム ショップ
 ================================================*/
.fourCols {overflow:hidden;margin-bottom:30px;}
.fourCols ul {overflow:hidden;margin-right:-2%;}
.fourCols li {list-style:none;width:23%;float:left;float:left;margin:0 2% 2% 0;}
.fourCols li:nth-child(4n+1) {clear:both;}
.fourCols li img {width:100%;}












/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
	.inner {width:100%;}

	#contents {box-sizing:border-box;width:96%;padding:0 10px;}

.innerr {width:96%;padding-left:5px;}
.box3 {padding: 0.5em 1em;margin: 0;}
.box3 p {margin:0.5em 0; padding:0.5em 0;}

#footer{clear:both;}

}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/

@media screen and (max-width:960px) {

.alignleft,.alignright{float:none;display:block;margin:0 auto;}

.col_two_one li {list-style:none;float:left;width:45%;margin:0 5px;text-align:left;vertical-align:middle;}

.gd {font-size:250%;}


.gdb {padding: 10px 2rem 2px 2rem;color: white;background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight:bold;font-size:300%; }


.contents {width:96%;padding:2em 0;}
.content {width:96%;padding:0.5em 0;}
.out{padding:20px 0;margin-bottom:1em;border-radius:10px;}


}


/*================================================
 *  スマートフォン向けデザイン
 ================================================*/



@media screen and (max-width:767px) {

body {	font-size:85%;line-height:1.5;}

.inner {width:100%;}
.innerth {width:90%;padding-left:10px;}

.lock {	overflow:hidden;}

header {text-align: center;}
.summarys {position:absolute;top:20px;right:5px;margin:0;font-size:12px;text-align:right;}
.summary {text-align: center; }
.summary img {text-align: center;padding-top:10px;width: 250px;}

.contents {width:90%;}

.contact {margin:10px 0;}


.f04 {font-size:86%;}


span {display: inline-block;}

#img_small {display: none;}#img_big {display: inline-block;}

.gdb {padding: 0;font-size:210%; }

.gdd {font-size:90%;}
.imagupt  {font-size:90%;}


	.col_two_one ul {margin-right:0;}
	.col_two_one li {width:100%;margin:0;}
	.col_two_one li:nth-child(2n+1) {clear:both;}


.big {font-size:140%;}

.bg1 {background-size:70%;padding:1em 0 1em 0;}
.bg1 img{padding-top:1em;}
.bg2 {background-size:70%;padding:1em 0 1em 0;}
.bg3 {background-size:12%;padding-bottom: 0.5em;}
.bg7 {background-size:70%;padding:1em 0 2em 0;}

	.threeCol ul{margin-right:0;}
	.threeCol li {width:100%;margin-bottom: 3em;}
	.threeCol li:nth-child(2n+1) {clear:both;}

.gdss {color: fefba5;background-image: -webkit-linear-gradient(315deg, #b57118 0%, #fdcb00 37%, #fefe9b 37%, #f8f8c5 50%, #ffffb4 53%, #e1ce08 43%, #b06c13 100%);background-image: linear-gradient(135deg, #b57118 0%, #fdcb00 37%, #fefe9b 47%, #f8f8c5 40%, #ffffb4 53%, #e1ce08 63%, #b06c13 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;font-weight:bold;text-align:left;font-size:170%; }



.totop img {width:80%;}


@media screen and (max-width:640px){
	.fourCol ul {font-size:14px;overflow:hidden;margin:2% -2% 0 0;}
	.fourCol li {list-style:none;float:left;width:48%;margin:0 2% 2% 0;}
	.fourCol li:nth-child(2n+1) {clear:both;}

	.fourCols ul {font-size:14px;overflow:hidden;margin:2% -2% 0 0;}
	.fourCols li {list-style:none;float:left;width:48%;margin:0 2% 2% 0;}
	.fourCols li:nth-child(2n+1) {clear:both;}

	section.box {padding:6px;border-radius:5px;}

}