@charset "utf-8";

/*
/* top/style.css ではTOPページ固有のデザインを設定 */
/*

/*---------------------------------------------------- 
 main : top slider
---------------------------------------------------- */
.main {
	padding-top: 125px;
	width: 100%;
}
.main .swiper-slide {
	height: 520px;

}
.main .swiper-slide .slide {
	height: 500px;
	text-align: center;
	background-size: cover;
	background-position: center;
	margin:0;
	padding:0;
}
/*.main .swiper-slide .slide01 {
	background-image: url(/images/top2/index/slide01_bg.jpg);
}
.main .swiper-slide .slide02 {
	background-image: url(/images/top2/index/slide02_bg.webp);
}
.main .swiper-slide .slide03 {
	background-image: url(/images/top2/index/slide03_bg.webp);
}*/

.main .swiper-slide a:hover .slide {
	opacity: 0.7;
}

@media only screen and (max-width: 740px) {
	.main {
		margin-top: 50px;
		padding-top: 0;	
	}
	.main .swiper-slide {
		height: auto;
		padding-bottom: 10px;
	}
	.main .swiper-slide .slide {
		height: auto;
	}
	.main .swiper-slide .slide img {
		width: 100%;
	}
}


/* =========================================================
category-exc
========================================================= */

.flex-exc {
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
    flex-wrap: wrap;            /* 折り返し指定 */
    margin:0px auto 30px auto;
}
 
.flex-exc-item {            /* 文字色 */
    padding:5px 10px;
    margin:  5px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 46.5%;                 /* 幅指定 */
}

@media only screen and (max-width: 740px) {
    .flex-exc-item {   
        margin:5px 0px;
        width: 100%; 
    }
}


/* =========================================================
flex
========================================================= */
.flex-yoko {
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
    flex-wrap: wrap;            /* 折り返し指定 */
    margin:0px auto 30px auto;
}
/*----------flex 2列------------*/
.flex-yoko2 {
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
    flex-wrap: wrap;            /* 折り返し指定 */
    margin:0px auto 30px auto;
}
 
.flex-yoko2-item {            /* 文字色 */
    padding:5px 10px;
    margin:  5px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 48.5%;                 /* 幅指定 */
}
/*----------flex 2列　可変------------*/
.flex-kahen2 {
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
    flex-wrap: wrap;            /* 折り返し指定 */
    margin:auto;
}
.flex-kahen2-item {            /* 文字色 */
    padding:5px;
    margin:  5px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}
.flex-kahen2-1 {            /* 文字色 */
    padding:5px;
    margin:  5px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    flex:1;
}
.flex-kahen2-2 {            /* 文字色 */
    padding:5px;
    margin:  5px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    flex:2;
}
.flex-kahen2-0 {            /* 文字色 */
    padding:5px;
    margin:  5px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}
/*----------flex 3列------------*/
.flex-yoko3 {
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
    flex-wrap: wrap;             /*折り返し指定 */
    margin-bottom:30px;
}
 
.flex-yoko3-item {            /* 文字色 */
    margin:  5px;              /* 外側の余白 */
    padding:5px 10px;
    border-radius:  5px;        /* 角丸指定 */
    width: 32%;                 /* 幅指定 */
}
/*----------flex 4列------------*/
.flex-yoko4 {
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
    flex-wrap: wrap;             /*折り返し指定 */
    margin-bottom:30px;
}
 
.flex-yoko4-item {            /* 文字色 */
    margin:  5px;              /* 外側の余白 */
    padding:5px;
    border-radius:  5px;        /* 角丸指定 */
    width: 23.7%;                 /* 幅指定 */
}


/*----------flex fw課題------------*/
 
div.fw-kadai div.flex-yoko3-item {            /* 文字色 */
    margin:  8px;              /* 外側の余白 */
    padding:20px;
    border-radius:  5px;        /* 角丸指定 */
    width: 31%;                 /* 幅指定 */
    box-shadow: 0px 5px 15px -5px rgb(0 0 0 / 80%);
}
div.fw-kadai div.flex-yoko3-item h4 { margin-top:0; }
 
div.fw-kadai div.flex-yoko2-item {            /* 文字色 */
    margin:  8px;              /* 外側の余白 */
    padding:20px;
    border-radius:  5px;        /* 角丸指定 */
    width: 48%;                 /* 幅指定 */
    box-shadow: 0px 5px 15px -5px rgb(0 0 0 / 80%);
}
div.fw-kadai div.flex-yoko2-item h4 { margin-top:0; }

/*----------flex pickup------------*/
.flex-pu {
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
    flex-wrap: wrap;             /*折り返し指定 */
}
 
.flex-pu-item {            /* 文字色 */
    margin: 10px 10px;              /* 外側の余白 */
    padding:0;
    border-radius:  5px;        /* 角丸指定 */
    width: 300px;                 /* 幅指定 */
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
}
.flex-pu-item a { text-decoration:none; }
.flex-pu-item p.pu-img { height:120px;margin:0;margin-bottom:10px; }
.flex-pu-item p.pu-title { margin-bottom:0; }
.flex-pu-item p.pu-title,.flex-pu-item p.pu-text { padding:0 10px; }
.flex-pu-item p.pu-title span { font-size:1.1em;color:#DC6223; }
.flex-pu-item p.pu-text span { font-size:0.9em; }


@media screen and (max-width:767px) {
	.flex-yoko2-item,
	.flex-yoko3-item {
		width:100%;
	}
}

.flex-yoko h4 { margin-top:0; }

/*---------------------------------------
  リードボタン（ヘッダー用）
---------------------------------------*/

.button-lead-h {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 180px;
    padding: 2px 0;

    border-radius: 4px;
    color: #ffffff;
    background-color: #569d29; /* 少し締めた緑 */
    /*border: 1px solid #3f7425;*/

    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;

    box-shadow: 0 2px 0 #3a6a21; /* 薄めの立体感 */
    transition: all 0.25s ease;
}

/* hover：軽く浮く */
.button-lead-h:hover {
    background-color: #3f7425;
    box-shadow: 0 3px 0 #2f581a;
    transform: translateY(-1px);
    color: #ffffff;
}

/* active：押した感 */
.button-lead-h:active {
    box-shadow: 0 1px 0 #2f581a;
    transform: translateY(0);
}

/* link / visited 念のため統一 */
div.entry .button-lead-h:link,
div.entry .button-lead-h:visited {
    color: #ffffff;
    text-decoration: none;
}
/*---------------------------------------　
リードボタン　フッター
---------------------------------------*/

.button-lead-f {
    display: inline-block;
    width: auto;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    outline: none;
    width:320px;
    color: #444;
    background: linear-gradient(180deg, #fff 0%, #fff 50%, #efefef 50%, #efefef 100%);
    font-size: 1.2em;
    font-weight: normal;
    padding:20px 0;
    border:1px solid #aaa;
}
.button-lead-f:before,
.button-lead-f:after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button-lead-f,
.button-lead-f:before,
.button-lead-f:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.button-lead-f:link {
    color: #444;
    text-decoration:none;
}
.button-lead-f:visited {
    color: #444;
    text-decoration:none;
}
.button-lead-f:hover {
    color: #444;
    background: linear-gradient(180deg, #d9dfe2 0%, #d9dfe2 50%, #cbd1d5 50%, #cbd1d5 100%);
    text-decoration:none;
}
.button-lead-f i { font-size:1.6em; }

@media screen and (max-width: 800px) {
  .button-lead-f {
    width:200px;
    font-size:1.1em;
  }
}

/*---------------------------------------
  リードボタン（CV用・強調版）
---------------------------------------*/

.button-lead {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;

    border-radius: 6px;
    padding: 16px 36px;

    color: #ffffff;
    background-color: #569d29; /* 少し深めの緑 */
    border: 1px solid #3f7425;

    font-size: 1.05em;
    font-weight: 600;
    text-decoration: none;

    box-shadow: 0 4px 0 #3a6a21; /* 下方向だけ影 */
    transition: all 0.25s ease;
}

/* link / visited（念のため明示） */
div.entry .button-lead:link,
div.entry .button-lead:visited,
.button-lead:link,
.button-lead:visited {
    color: #ffffff;
    background-color: #569d29;
    border: 1px solid #3f7425;
    text-decoration: none;
}

/* hover */
.button-lead:hover {
    background-color: #35661f;
    box-shadow: 0 6px 0 #2f581a;
    transform: translateY(-2px);
    color: #ffffff;
}

/* active（クリック時） */
.button-lead:active {
    box-shadow: 0 2px 0 #2f581a;
    transform: translateY(1px);
}

/* アイコン */
.button-lead i {
    font-size: 1.4em;
    line-height: 1;
}


/*---------------------------------------　
リードボタン2 
---------------------------------------*/

.button-lead2 {
    display: inline-block;
    width: auto;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    outline: none;
    width:490px;
    color: #444;
    background: linear-gradient(180deg, #fff 0%, #fff 50%, #efefef 50%, #efefef 100%);
    font-size: 1.6em;
    font-weight: normal;
    padding:20px 0;
    border:1px solid #aaa;
}
.button-lead2:before,
.button-lead2:after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button-lead2,
.button-lead2:before,
.button-lead2:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.button-lead2:link {
    color: #444;
    text-decoration:none;
}
.button-lead2:visited {
    color: #444;
    text-decoration:none;
}
.button-lead2:hover {
    color: #444;
    background: linear-gradient(180deg, #d9dfe2 0%, #d9dfe2 50%, #cbd1d5 50%, #cbd1d5 100%);
    text-decoration:none;
}
.button-lead2 i { font-size:1.6em; }

@media screen and (max-width: 1000px) {
  .button-lead2 {
    width:400px;
  }
}
@media screen and (max-width: 800px) {
  .button-lead2 {
    width:280px;
    font-size:1.1em;
  }
}


i.material-icons  { vertical-align: middle; }

/*------------上下中央------------*/
.ud-center {
  align-items: center;
}

.shadow {
    margin: 10px 5px 30px;
    padding:10px;
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向　下方向　ぼかし　広がり　色 */
}
.img-center{
    text-align:center;
    overflow:hidden;
    margin:50px 0;
}
.center { text-align:center; }

/*------------上下左右中央------------*/

.udlr {
  display: flex;
  justify-content: flex-start; 
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 600px) {
  .udlr {
    flex-direction: column;
  }
}

.youtube { width:560px; }
@media screen and (max-width:560px) {
	.youtube { width:100%; }
	.youtube iframe { width:100%; }
}

/* =========================================================
forSP
========================================================= */
.forSP {
    display: none;
}
.hb740 {
    display: none;
}
.hb405 {
    display: none;
}


@media screen and (max-width:999px) {
    .forSP {
        display: block;
    }
    .forSP img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .forPC {
        display: none!important;
    }
}

@media screen and (max-width:740px) {
    .hb740 {
        display: block;
	text-align:right;
	margin-top:5px;
	margin-right:45px;
	font-size:0.7em;
    }
    .hb740 img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .forPC {
        display: none!important;
    }
}
@media screen and (max-width:405px) {
    .hb405 {
        display: block;
	text-align:right;
	margin-top:10px;
	margin-right:35px;
	font-size:0.7em;
    }
    .hb405 a { margin-right:1em; }
    .hb405 img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .forPC {
        display: none!important;
    }
    .hb740 {
        display: none!important;
    }
}

@media screen and (max-width:767px) {
    .forSP {
        display: block;
    }
    .forSP img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .forPC {
        display: none !important;
    }
    li.footer{
        width:100%;
        padding: 0 5%;
    }
}


.bg-fff { background-color:#fff; }

/* TOP_認証強化によって実現できること */
		.auth-effects__title {
		  text-align: center;
		  font-size: 1.5rem;
		  font-weight: 600;
		  margin-bottom: 32px;
		}

		.auth-effects__list {
		  max-width: 340px;
		  margin: 0 auto;
		  padding: 0;
		  list-style: none;
		}

		.auth-effects__list li {
		  display: flex;
		  align-items: flex-start;
		  gap: 12px;
		  padding: 14px 0;
		  border-bottom: 1px solid #e3e6e8;
		  font-size: 1.2em;
		}

		.auth-effects__list li:last-child {
		  border-bottom: none;
		}

		.auth-effects__list strong {
		  font-weight: 600;
		}

		.check {
		  color: #2c7be5; /* アクセントカラー */
		  font-weight: 700;
		  line-height: 1.4;
		}


/* サイトTOPバナー */

.bg-fixed-center {
  background-image: url("/images/yubion_top_imgbn.png");
  background-position: center center!important;
  background-repeat: no-repeat;
  background-size: contain!important;
}



.top-banner { width:1000px; }
.top-banner h1 {
	margin-top:0;
	margin-bottom:0;
}
.top-banner h1 p {
	text-align:right;
	/*line-height:2.5em;
	font-size:1.7em;*/
}


.top-banner h1::before {
	content: none;
}

.top-banner h1 span.h1-strong-top { font-size:1.8em;color:#569D29; }
.top-banner h1 span.h1-strong { font-size:1.3em;color:#569D29; }
.top-banner img { width:150px;margin:10px 20px; }
.top-banner p { text-align:right; }

@media screen and (max-width: 740px) {
  .top-banner { width:100%; }
  .top-banner h1 {
	font-size:1em;
	margin:50px 0 20px 10px;
  }
  .top-banner img { width:100px; }
  .top-banner p { margin-bottom:50px; }
}



/* 料金プラン */

.pricing {
  padding: 40px 0;
}

.pricing h2 {
  text-align: center;
  margin-bottom: 30px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.price-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  position: relative;
  background: #fff;
}

.price-card ul {
  margin-bottom: 30px;
}

.price-card ul,
.price-card ul li {
  text-align: left;
}

.price-card h3 small {
  display: block;
  font-size: 0.8em;
  opacity: 0.7;
}

.target {
  margin: 10px 0 20px;
  font-size: 0.9em;
}

.price {
  margin-bottom: 20px;
}

.price strong {
  font-size: 2em;
  display: block;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #666;
  text-decoration: none;
  color: #333;
}

.primary {
  background: #569d29;
  color: #fff;
  border-color: #333;
}

.featured {
  border: 2px solid #569d29;
  transform: translateY(-10px);
  margin-top: 12px;
}

.featured a:hover {
  background-color: #89bf68;
}

.badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff6b6b;
  color: #fff;
  font-size: 0.75em;
  padding: 4px 10px;
  border-radius: 999px;
}


.price-card ul li {
	list-style-image: url('/images/ul.png');
	padding-left:0.5em;
}








/* ***白背景ボタン*** */

  /* ボタンを中央寄せにするためのコンテナ */
  .yubion-btn-wrapper {
    width: 100%;
    text-align: center;
    margin: 30px 0;
    padding: 10px;
    box-sizing: border-box;
  }

  /* ボタン本体のデザイン（詳細度を上げるためクラスを重ねています） */
  .yubion-btn-outline.yubion-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    
    background-color: #ffffff !important;
    color: #6EB92B !important; /* YubiOnグリーン */
    border: 2px solid #6EB92B !important;
    border-radius: 50px !important; /* カプセル型 */
    
    padding: 12px 32px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }

  /* ホバー（マウスを乗せた時）の挙動 */
  .yubion-btn-outline:hover {
    background-color: #f0f9e8 !important; /* 非常に薄い緑 */
    opacity: 0.9 !important;
    text-decoration: none !important;
  }

  /* アイコン（右矢印） */
  .yubion-arrow-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }







/* スマホ */
@media (max-width: 768px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }

  .featured {
    transform: none;
  }
}