.item img {
    width: 100%;
}
.toujitu {
    display: block;
}
.kensaku_area {
    display: block;
    margin: auto;
    max-width: 95%;
}
.topbnr_onecalm {
    width: 100%;
}

.topbnr_onecalm img {
    width: 100%;
    padding: 1px;
}

.topbnr_towcalm a {
    width: 50%;
    float: left;
}

.topbnr_towcalm img {
    width: 100%;
    padding: 1px;
}

.topbnr_towcalm {
    width: 100%;
}

@media screen and (max-width:767px) {
    /*　画面サイズが480pxからはここを読み込む　*/

}
/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}

.ec-headerNaviRole {max-width: none;}
#recruitpage{
    transform:  skew(10deg, -10deg);
    position: absolute;
    font-weight: bold;
    color: white;
    font-size: x-small;
    line-height: 1.5;
    background-color: #ff0211;
    left: 0.5em;
    top: 0.2em;
}
@media only screen and (min-width: 768px){
.ec-itemNav__nav li {
        width: 14%;
    }
}
.zoom1 {
    transition: transform 1s ease 0s;
}

li.oshirase {
    width: 45%;
    float: left;
    margin: 1%;
}

.mb20 h4 {
    padding-left: 1em;
}
.mineshow {
    margin-top:10px;
    width: fit-content;
    max-width: 100%;
}
.mineshow video {
    width: fit-content;
    max-width: 100%;
}
.top-wellcome {
    padding: 7em 0px;
    text-align: center;
    color: white;
    height: 450px;
    background: no-repeat center/100% url("/html/user_data/toppage_bnr/topbnr.jpg");
    background-size: cover;
}

.top-wellcome h1 {
    margin: 0em 0em 1em;
    padding: 0em;
    font-size: 3em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
}

.top-wellcome p {
    font-size: 1.5em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
.top-wellcome {
    padding: 5em 0;
    text-align: center;
    color: white;
    height: 350px;
    background: no-repeat center/100% url("/html/user_data/toppage_bnr/topbnr_sp.jpg");}

.top-wellcome h1 {
    margin: 0em;
    padding: 0em 2em;
    font-size: 2em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
}

.top-wellcome p {
    padding: 0em 1em;
    font-size: 1em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
    letter-spacing: -0.1em;
}
}

.akeome2024 {
    padding: 7em 0px;
    text-align: center;
    color: white;
    height: 450px;
    background: no-repeat center/100% url("/html/user_data/toppage_bnr/tes.jpg");
    background-size: cover;
}

.akeome2024 h1 {
    margin: 0em 0em 1em;
    padding: 0em;
    font-size: 3em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
}

.akeome2024 p {
    font-size: 1.5em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
    
    background: #285d8154;
}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */

/*--スマホ用のバナーCSS---*/
.topbnr_towcalm a {
    width: 100%;
    float: none;
    margin: auto 1px;
}
.topbnr_towcalm img {
    margin: auto 5px;
    width: 100%;
    display: block;
}

.topbnr_towcalm {
    width: 100%;
}


.akeome2024 {
    padding: 5em 0;
    text-align: center;
    color: white;
    height: 350px;
    background: no-repeat center/100% url("/html/user_data/toppage_bnr/topbnr_sp.jpg");}

.akeome2024 h1 {
    margin: 0em;
    padding: 0em 2em;
    font-size: 2em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
}

.akeome2024 p {
    padding: 0em 1em;
    font-size: 1em;
    text-shadow: 0 0 10px #000;
    font-weight: bold;
    letter-spacing: -0.1em;
}
}

a.size {
    border: 1px dotted;
    color: white;
    padding: 5px;
    margin: 2px auto 1px;
    display: block;
}
.key_word_area_a {
    padding: 0;
}

.key_word_area li:hover {
    color: #fff;
    background: #89b5e9;
	border-bottom: 2px solid #fff;
    transform: translateY(3px);
}
.qrzico {
    width: 10%;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    margin: 10px 19px;
    color: white;
}
a.btn_07 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: fit-content;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	color: #27acd9;
	border-bottom: 2px solid #27acd9;
	border-radius: 100vh;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	transition: 0.5s;
}
a.btn_07:hover {
	color: #fff;
	background: #27acd9;
	border-bottom: 2px solid #fff;
	transform: translateY(3px);
}
.search_title {
    font-size: x-large;
    font-weight: bold;
    color: white;
    margin: 0.5em auto;
}
.key_word_area {
    width: 90%;
    margin: 10px auto 5px;
        border: dotted #f6f6f6 3px;
}

.key_word_area li {
    font-size: 0.8rem;
    list-style: none;
    display: inline-block;
    background-color: #EEEFEF;
    padding: 1px 20px;
    margin: 3px 2px 0;
    border-bottom: 2px solid #27acd9;
    border-radius: 100vh;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
}

.key_word_area p {
    text-align: center;
    font-weight: bold;
    color: white;
}

.search_p p {
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    margin: 10px 19px;
    color: white;
}
.key_word_area_a a {
    color: black;
    font-weight: bold;
    text-decoration-line: none;

}

.key_word_area_a ul {
    font-family: cursive;
}
.key_word_area_t {
    font-size: large;
    margin: auto;
}

.keywordarea {
  background-image: linear-gradient(0deg, rgba(107, 129, 216, 1), rgba(237, 237, 237, 1));    margin: 0px;
    padding: 1%;
    text-align: center;
    color: white;
    font-weight: bold;
}

.ec-blockTopBtn2 {
    margin: 10px;
    padding: 10px 5px;
    display: none;
    position: fixed;
    width: fit-content;
    left: 0;
    bottom: 0;
    cursor: pointer;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    opacity: 0.8;
    background-color: #fff;
}
.ec-blockTopBtn2 a {
    color: #fff;
}

.ec-blockTopBtn4 {
    padding: 5px;
    display: none;
    position: fixed;
    width: 8%;
    left: 0;
    bottom: 10%;
    cursor: pointer;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    opacity: 0.93;
    background-color: #fff;
}
.ec-blockTopBtn4 img {
    width: 100%;
}
.ec-blockTopBtn3 a {
    color: #212121;
    font-size: large;
    font-weight: bold;
}
.ec-blockTopBtn3 img {
    width: 3em;
    margin: 0% 2% 0% 2%;
}
.ec-blockTopBtn3 {
    
    background-color: #efefef;
    margin: 2% 0%;
    padding: 2%;
    display: none;
    position: fixed;
    width: fit-content;
    left: 0;
    bottom: 55px;
    cursor: pointer;
    text-align: center;
    opacity: 0.7;
    font-family: fantasy;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
.outline {
    display: inline-block;
    color: #ffffff;
    text-shadow: 5px 5px 8px #1a1aff, -5px 5px 8px #1a1aff, 5px -5px 8px #1a1aff, -5px -5px 8px #1a1aff, 5px 0px 8px #1a1aff, 0px 5px 8px #1a1aff, -5px 0px 8px #1a1aff, 0px -5px 8px #1a1aff;
    font-size: 32px;
    font-weight: bold;
}
.ec-secHeading.suiyou {
    background-image: url(/html/user_data/toppage_bnr/top_titlebar_mainmenu.png);
    margin-top: 15px;
    margin-bottom: 15px;
    color: #fff;
    background-color: #df5d50;
    padding-left: 3.5em;
    background-repeat: no-repeat;
}
.kaiin .ec-grid3__cell_sp {
    width: 33%;
    float: left;
    padding: 0.58%;
}
.ec-footerRole {
    background: #565656;
}
.category_link ul {
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.category_link li {
    list-style: none;
    float: left;
    margin: 0 1px 1px 0;
    width: 30%;
    font-size: 50%;
    border: outset;

}
.menu_search {
    margin: 1em;
    padding: 1.5em 2em;
    background: #325071;
}
@media (min-width: 1199px) {
.ec-categoryNaviRole {
padding-right: 0px;
padding-left: 0px;
} 
}
.ec-shelfRole {
    max-width: fit-content;
}

.ec-categoryNaviRole{
    max-width: 100%;
    padding-left:5%;
    padding-right:5%;
}   
.mapiframe {
    height: 250px;
    padding: 1% 5%;
}
.snslink .fab {
    font-size: xx-large;
}
.snslink {
    font-family: fantasy;
    margin: 1%;
    padding: 0 5%;
}
.snslink a {
    color: black;
    font-style: italic;
    font-weight: 300;
}
.snslink li {
    list-style: none;
}
.tenpo_schedule {
    height: 600px;
}
.ec-role .ec-layoutRole__contents img {
    width: 100%;
}
.ec-productRole .ec-productRole__title .ec-headingTitle{
    font-weight: bold;
    font-size: 25px;
}
.ec-event_nav {
  list-style: none;
}
.ec-headerNav .ec-headerNav__item {
    margin-left: 0;
    display: inline-block;
    font-size: 15px;
    text-align: center;
}
.ec-event__nav li {
    float: left;
    width: auto;
    display: block;
    margin: 1%;
    padding: 1px;
    text-align: center;
    line-height: 2.5em;
    background-color: #bfffc5;
    border-radius: 30px;
}

.ec-topicRole__list img {
    width: 100%;
}
.ec-layoutRole__contentBottom {
    margin: 1% auto;
}
.mainmenu_grid_cell03 img {
    width: 100%;
    max-width: 100%;
}
.ec-event__nav a {
    color: #343434;
    font-weight: bold;
    text-align: center;
    font-size: small;
}
.toppagebnr {
    display: block;
    margin-top: 3px;
}
.price02-default {
    text-align: right;
    font-weight: bold;
    line-height: 1.50em;
    margin-top: 5px;
}
.product-name {
    font-weight: bold;
    line-height: 1em;
    margin-top: 5px;
}
.ec-shelfGrid__item .product-code-default {
    font-size: 75%;
}

.ec-shelf_item_size {
    font-size: small;
    margin-top: 3px;
    color: #999999;
    line-height: 110%;
    font-weight: bold;
    text-align: center;
}
.ec-cartNavi__icon.fas.fa-shopping-cart {
    color: black;
}
.fas.fa-bars {
color: black;
}
.mobileHidden {
    max-width: 100%;
}
.desktopHidden {
    max-width: 100%;
}

.product_page .ec-productRole {
    margin: 0 auto;
    padding-left: 0px;
    padding-right: 0px;
}   
.freearea img {
    max-width:100%;
}
.ec-layoutRole .ec-layoutRole__contents {
margin: auto;
    max-width: 1350px;
}
.ec-shelfGrid .ec-shelfGrid__item-image {
    height: auto;
}
.ec-footerTitle {
    padding: 50px 0 20px;
    color: #000;
}
.contents01 {
    padding: 10px;

}

.baibaicss1{
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    
    max-width: 100%;
}
.baibaicss2 {
    font-size: small;
}
.ec-newsRole__newsDescription a img {
    margin: 1px;
    width: calc(97%/4);
}

.contents04 {
    padding: 4% 0;
    background: #c6e8e5;
}

.mb40 {
    margin-bottom: 40px;
}
.ec-footerTitle .ec-footerTitle__copyright {
    font-size: 10px;
}
.top_ecnewitem{
    margin-bottom: 2.5em;
    border-bottom: 1.5px #325071 dotted;
    padding: 1%;
}
.ec-role.topbnr_tokushu {
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
}
.mainmenu_grid .mainmenu_grid_cell03 {
    position: relative;
    min-height: 1px;
}
.mainmenu_grid {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}

.orofro li {
    margin-block: 1em;
}
.clear {
    clear: both;
}
.freearea .tyuui {
    margin: 15px 1.5em;
    background: #f5f5f5;
}
.ec-productRole__description h4 {
    font-weight: bold;
    border-left-style: double;
    padding: 5px;
}
    
.detaillink {
    margin: 1em;
}

.detaillink p {
    font-size:13px;
    font-weight: bold;
}
.eyecatchimg a img {
    margin: 1px;
    width: calc(97%/4);
}
.keikoukoubutu .catch p {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}
.mobileHidden { display:none;}
 
@media screen and (min-width:767px) { 
.mainmenu_grid_cell03_2 {
    width: 50%;
}
.mainmenu_grid_cell03_2 .ec-headerNaviRole__left {
    padding: 5% 0;
}
.ec-searchnavRole{
    max-width: fit-content;
}
.new_cate {
    border-radius: 30px;
    position: absolute;
    bottom: 9px;
    right: 0;
    color: #fff;
    background: rgb(255 2 17);
    width: 6em;
    font-size: 8px;
    font-weight: bold;
    text-align: center;
    transform: rotate(-25deg);
    padding: 3px;
}
.ec-searchnavRole{
    max-width: inherit;
}
.ec-role .category_all{
    max-width: inherit;
}
.ec-searchnavRole .ec-searchnavRole__infos{
    max-width: inherit;
}
.slick-slide.item img {
height:100%;
}
.ec-footerTitle .ec-footerTitle__copyright {
    font-size: 12px;
}
.ec-footerTitle {
    padding: 50px 0 20px;
}
.main_visual {
height:100%;
}

    .desktopHidden { display:none;}
    .mobileHidden { display:inline;}

.pickup {
    position: relative;
    width: 22%;
    float: left;
    margin: 1em;
    padding: 5px;
}


.pickup img {
    border-radius: 50%;
    display: inline-block;
    transform: rotate(7deg);
  width: 100%;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
  }
	
.pickup h4 {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    position: absolute;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.5em;
}
.pickup p {
    text-align: left;
    color: #325071;
    font-weight: bold;
    font-size: 0.8em;
    margin: 10px;
    height: 5em;
}
}
/* fadeテスト */
.fadein {
  opacity : 0;
  transform: translateY(5px);
  transition: all 0.7s;
}
/* 浮くやつ */
.floatup{
  transition: transform 2s ease 0s;
}
.floatup:hover{
  transform:translate(0, -20%) ;
}
.zoom1:hover{
    transform: perspective(500px) translateZ(50px);
}

.ec-eyecatchRole_tt {
  margin:10px 2em 0px 2em;
  font-size:18px;
}
.ec-eyecatchRole_td {
  margin:0px 5em;
  font-size:14px;
}





.syousaititle {
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}
.syousai { 
    margin-top: 5px;
    margin-bottom: 1em}

.ec-newsRole__newsTitle {
  text-decoration: none;
}

.ec-role .ec-newsRole .ec-newsRole__newsTitle img {
    max-width: 200px
}

.ec-newsRole__newsTitle:hover {
  text-decoration: underline;
  text-decoration-color: #a0a0a0;
}

.ec-eyecatchRole .ec-eyecatchRole__image {
  display: block;
  margin-bottom: 40px;
  margin-top: 5em;
  width: 150%;
  height: 100%;
}

.ec-secHeading {
    background-image: url(/html/user_data/toppage_bnr/top_titlebar_mainmenu.png);
    margin-top: 15px;
    margin-bottom: 15px;
    color: #fff;
    background-color: #325071;
    padding-left: 3.5em;
    background-repeat: no-repeat;
}
.ec-secHeading .ec-secHeading__en {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.2em;
    font-family: "Yu Mincho normal", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.oshirase .ec-secHeading__en {
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0em;
    font-family: "Yu Mincho normal", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* トップページ新着商品特別価格テキスト強調指定 */
.text_toppage_tokubetsukakaku {
  color: #ff5555;
  font-weight: bold;
  font-size:120%;
}

/* カスタマイズ用CSS */
/* トップページ新着商品リスト */
.ec-newItemRole .ec-newItemRole__listItemPrice{
    color:#cc0000;
    font-weight:bold;
    text-align: right;
    font-size:18px;
}

.youtube_item  {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
.youtube_item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
display:block;
}

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 600px;
}

.iframe-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 600px;
}
/* サイドメニュー */


@media only screen and (min-width: 767px){
.shopcontents_r {
    padding: 0 2%;
    border-left: black dotted 2px;
}
.shopcontents_l {
    padding: 0 2%;
}

.fluopage_img.ec-eyecatchRole__image {
    width: 50%;
}

.pre img {
    max-width: 70%;
    float: left;
}
.freearea {
    width: 69%;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
}

.ec-grid4__cell img {
    width: 100%;
}
.ec-productRole__description {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    line-height: 1.4em;
}
.eyecatchimg a img {
     margin: 1px;
    width: calc(97%/4);
}

.ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 74%;
    float: left;
}	
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
    width: 20%;
    float: left;
}
.ec-itemNav__nav li ul {
    position: absolute;
    top: 0;
    left: 100%;
	min-width: 180px;
}	
.ec-layoutRole__left ul.ec-itemNav__nav li {
    width: 100%;
}

.ec-layoutRole__left ul.ec-itemNav__nav li a {
    text-align: left;
    background: #c6e8e5;
    border: 1px solid #fff;
    border-top: 0;
    color: #000;
    margin: 0;
    width: 100%;
    padding: 0.5em;
    min-height: 3.5em;
}
.ec-layoutRole__left ul.ec-itemNav__nav li a:hover {
    background: #d7efed;
}	
.ec-layoutRole__left ul.ec-itemNav__nav li ul li a {
    background: #f8f8f8;
    width: 190px;
    font-size: 90%;
	padding: 16px 12px 16px 5px;
}	
.ec-layoutRole__left ul.ec-itemNav__nav li ul li a:hover {
	background: #c6e8e5;	
}	
.ec-itemNav__nav li ul li ul:before {
    color: #000;
}	
.ec-itemNav__nav li:hover ul li ul li a:hover {
    background: #c6e8e5;
}	
.ec-itemNav__nav > li:hover li:hover > a {
    background: #c6e8e5;
}	
}
@media (max-width: 1200px) {
.sazare1 {
    display: none;
}
.sazare2{
    display: none;
}
.sazare3{
    display: none;
}
}
@media (min-width: 481px) and (max-width: 766px) {
.sazare1 {
    display: none;
}
.sazare2{
    display: none;
}
.sazare3{
    display: none;
}

.eyecatchimg a img {
    margin: 1px;
    width: calc(97%/2);
    padding: 0 1%;
}
}
@media (min-width: 980px) and (max-width: 3000px) {
    .ec-grid2 .ec-grid2__cell {
    width: 50%;
    }
.ec-grid2 .ec-grid2__cell_main {
    width: 69%;
    }
    .ec-grid2 .ec-grid2__cell_sub {
    width: 30%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .ec-grid2 .ec-grid2__cell {
    width: 50%;
    }
    .ec-grid2 .ec-grid2__cell_main {
    width: 69%;
    }
    .ec-grid2 .ec-grid2__cell_sub {
    width: 30%;
    }
    .sazare1 {
    display: none;
}
.sazare2{
    display: none;
}
.sazare3{
    display: none;
}
}

@media (max-width: 480px) {
.freearea max-width{
    max-width:100%;
}
.col-xs-12 {
    width: 50%;
}
.ec-headerNav .ec-headerNav__itemLink {
    display: block;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 5px;
    vertical-align: middle;
    color: black;
}
.ec-headerNav .ec-headerNav__itemIcon {
    display: block;
    margin-right: 1em;
    margin-left: 1em;
    color: black;
    
    font-size: small;
}
.freearea {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    line-height: 1.4;
    width: 100%;
    margin: 0px;
}
.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 330px;
}

.iframe-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 330px;
}
.eyecatchimg a img {
    margin: 1px;
    width: calc(97%/2);
    padding: 0 1%;
}

}

/* PICK UP */
.contents01 {
	margin-top: 5px;
}
.contents01 .ec-grid4__cell {
    width: 31.33%;
    margin: auto;
}
.contents01 .ec-grid4__cell:nth-child(4n) {
    margin-right: 0;
}





/* 商品一覧 */
.category_all {
    display: block!important;
}
.category_h3 {
    margin: 0!important;
}
ul.category_list {
    padding: 0;
    max-width: 1130px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
ul.category_list li {
    list-style: none;
    float: left;
    margin: 0 1% 1% 0;
    width: 24%;

}
ul.category_list li.bnr_2x {
    width: 49%;
}
ul.category_list li img {
    width: 100%;
    max-width: 100%;
}
.ec-role h3 {
    font-size: 23px;
    border-left: 5px solid #c6e8e5;
    padding-left: 10px;
    margin: 30px 0 25px!important;
}
@media (min-width: 979px) and (max-width: 1199px) {
.ec-shelfGrid .ec-shelfGrid__item-image {
    height: auto;
}
.ec-layoutRole .ec-layoutRole__contents {
margin: auto;
max-width: 100%;
}

ul.category_list li {
    width: 24%;
}
ul.category_list li.bnr_2x {
    width: 49%;
}	
}
/*--スマホ用のCSS---*/

@media screen and (max-width: 767px) {
    img.cell00 {
    display: none;
}


    .ec-layoutRole .ec-layoutRole__contents {
margin: auto;
max-width: 100%;
display: block;
}
.ec-role {
    margin: 0 auto;
    padding-left: 2%;
    padding-right: 2%;
}
    .ec-sliderRole {
    width: 100%;
    margin-bottom: 24px;
    max-width: 2000px;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}
    .footerRole__1 .ec-grid2__cell {
    margin: auto;
    width: 250px;
}
.ec-shelfGrid .ec-shelfGrid__item-image {
    height: auto;
}
    .ec-newsRole__newsDescription a img {
    margin: 1px;
    width: calc(96%/3);
    padding: 0 1%;
}

    .col-xs-12 {
    width: 50%;
}

.mainmenu_grid .mainmenu_grid_cell03 {
    position: relative;
    min-height: 1px;
    width: 100%;
    max-width: 49%;
    margin: auto;
}
.mainmenu_grid {
    display: flex;
    flex-wrap: wrap;
    max-width: 520px;
    margin: 0 auto;
}
.freearea max-width{
    max-width:100%;
}
    
.pickup {
    position: relative;
    width: 40%;
    float: left;
    margin: 1em;
    padding: 5px;
}

.pickup img {
    border-radius: 50%;
    display: inline-block;
    transform: rotate(7deg);
  width: 100%;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
  }
	
.pickup h4 {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    position: absolute;
    color: #ffffff;
    font-weight: bold;
    font-size: 1em;
}
.pickup p {
    text-align: left;
    color: #325071;
    font-weight: bold;
    font-size: 0.8em;
    margin: 10px;
    height: 5em;
    
}


.contents01 .ec-grid4 {
    display: flex;
    flex-wrap: wrap;
    max-width: 520px;
    margin: 0 auto;
}	
.contents01 .ec-grid4__cell {
    width: 49%;
    margin: auto;
}	
.contents01 .ec-grid4__cell:nth-child(2n) {
    margin-right: 0;
}	

.category_h3 {
    max-width: 365px;
	margin: 0 auto!important;
}    
ul.category_list {
    margin: 0 auto 30px;
}
ul.category_list li {
    width: 32%;
}
ul.category_list li.bnr_2x {
    width: 65%;
}
}

/*--oroshipage---*/

.box26 {
    position: relative;
    margin: 1.5em 2em;
    padding: 0.5em 1em;
    border: solid 3px #337ab7;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 1.5em;
    background: #FFF;
    color: #337ab7;
    font-weight: bold;
}
.box26 p {
    margin: 15px 10px 10px;
    padding: 0;
}
.pic img {
    width: 100%;
    padding: 1em;
}
.box26 .box-title2 {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #337ab7;
    font-weight: bold;
}
.box26 ul {
    position: relative;
    margin: 1.5em 0em 0;
    padding: 3.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.o_touroku_n h4 {
    font-weight: 700;
    background: #337ab7;
    color: #fff;
    padding: 10px;
    font-size: large;
}
.oroshipage p {
    margin: 0.5em 0.5em 1em;
}

.etcguide h3 {
    margin: 5px 0 5px!important;
    font-size: 19px;
    background: #FFF;
    color: #337ab7;
    font-weight: bold;
    border-left: none;
    padding-left: 5px;
}
.etcguide ul {
    position: relative;
    margin: 1.5em 0em 0;
    padding: 1.5em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.etcguide li {
    padding-left: 1.5em;
}
.ec-role{
    max-width: 100%;
    margin: 0 auto;
}

.test__container {
  padding-top: 30px;
  padding-bottom: 30px;
}

.test-slick {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
}
@media screen and (max-width: 800px) {
  .test-slick {
    margin: 5% auto;
  }
}

.test-slick__item {
  margin-right: 5px;
  margin-left: 5px;
}

.test-slick__item img {
    height: auto;
    width: 100%;
    transform: scale(.7);
    transition: transform .5s; 
}
.test-slick__item {
    margin-right: 5px;
    margin-left: 5px;
}