@charset "UTF-8";

/************************************
** トップページ
************************************/


/********* メイン*************************************************/
.top_main {
	position: relative;
display: block;
margin: 0 auto;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
}

@media only screen and (max-width: 1280px) {
.top_main {
display: block;
margin: 0 auto;
	margin-top: 0;
margin-bottom: 0;
}
}
@media only screen and (max-width: 1023px) {
.top_main {
	margin-top: 50px;
margin-bottom: 0;
}
}









/* 全体の2カラムグリッドレイアウト */
.layout {
  display: grid;
  grid-template-columns: calc(50% - 12px) 1fr;
  gap: 24px;
}

/* お知らせボックス */
}

@media screen and (max-width: 980px){
.news-box {
 padding: 16px 24px;
}
}


.grid_sns05 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 24px;
}
.grid_sns05box {
    grid-column: span 2 / span 2;
}
@media only screen and (max-width: 640px) {
.grid_sns05 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}   
.grid_sns05box {
    grid-column: span 6 / span 6;
}
}




/* メインのグリッドカード部分 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
  gap: 24px;
}

/* 各カード共通スタイル */
.menu-card {
  text-align: center;
  transition: transform 0.3s ease;
}

.menu-card:hover {
  transform: translateY(-5px);
}

/* 各色背景（任意） */
.pink { background-color: #fde3f0; }
.purple { background-color: #e6dbff; }
.blue { background-color: #d7ecff; }
.orange { background-color: #ffe7c7; }
.green { background-color: #dbf8e1; }
.gray { background-color: #eeeeee; }

/* レスポンシブ：スマホ時は1カラム */
@media screen and (max-width: 640px){
  .layout {
    grid-template-columns: 1fr;
  gap: 16px;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 16px;
}
}


@media screen and (max-width: 640px){
.menu-grid {
order: 1;
}
.news-box {
order: 3;
}
.grid_top_news_under {
order: 2
}
}





.bt_left_arrow {
  display: inline-block;
  position: relative;
  margin-left: 1.2em;
  line-height: 130%;
}

.bt_left_arrow a::before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  margin: 0;
  padding: 0;
  left: -1.2em;
  color: #287928;
}
.bt_top_shinryou {
  display: inline-block;
  position: relative;
  line-height: 130%;
}

.bt_top_shinryou a {
  display: block;
}
.bt_top_shinryou a:hover {
text-decoration: underline;
}

.bt_left_arrow a {
  display: block;
}
.bt_left_arrow a:hover {
text-decoration: underline;
}
.bt_left_arrow a:hover::before  {
  color: #CCC;
}
.bt_right_arrow {
  display: inline-block;
  position: relative;
  line-height: 130%;
}
.bt_right_arrow a::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  margin: 0;
  padding: 0;
  right: -1.2em;
  color: #287928;
}

.bt_right_arrow a {
  display: block;
  padding-right: 0;
}
.bt_right_arrow a:hover {
text-decoration: underline;
  padding-right: -1.2em;
}
.bt_right_arrow a:hover::after  {
  right: -1.5em;
  color: #F9B54F;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}






.bt_news {
display: inline-block;
line-height: 150%;
padding: 0;
margin: 0;
}
.bt_news a {
position: relative;
display: block;
padding-left: 1.2em;
line-height: 150%;
color: #555;
text-decoration: none;
}
.bt_news a:hover {
color: #0194ff;
text-decoration: underline;
}

.bt_news a:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f35a";
  margin: 0;
  margin-left: -1.2em;
  padding: 0;
  color: #0194ff;
  }
  
.bt_yaji_big {
display: inline-block;
line-height: 150%;
padding: 0;
margin: 0;
}
.bt_yaji_big a {
position: relative;
display: block;
padding-left: 1.2em;
line-height: 150%;
color: #555;
text-decoration: none;
}
.bt_yaji_big a:hover {
color: #0194ff;
text-decoration: underline;
}

.bt_yaji_big a:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f35a";
  margin: 0;
  margin-left: -1.2em;
  padding: 0;
  color: #0194ff;
  }
  
  
  
.flex_top_netstitle {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 8px;
margin-bottom: 8px;
}

.flex_top_netstitle_l {
display: inline-block;
}
.flex_top_netstitle_r {
display: inline-block;
}


.boxtop_newslist {
display: block;
 border: 2px solid #004DA1;
 padding: 24px;
 border-radius: 8px;
}
@media screen and (max-width: 640px) {
.boxtop_newslist {
 padding: 16px;
}
}

.box_top_news_flex {
display: flex;
flex-flow: column;
flex-wrap: wrap;
}
.box_top_news {
display: block;
border-bottom: 1px dashed #999;
padding: 8px 0;
margin-bottom: 0;
}

.box_top_news::last-child {
margin-bottom: 0;
}
.box_top_news .daytime {
font-weight: normal;
}

p.box_top_news_title {
margin-bottom: 0;
}
p.box_top_news_title a {
text-decoration: underline;
color: #004DA1;
}



.grid_top_news_under {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(auto, 1fr);
    gap: 24px;
}

.grid_top_news_under_box {
    grid-column: span 6 / span 6;
}
.grid_top_news_under_box03 {
    grid-column: span 4 / span 4;
}
.grid_top_news_under_box03_01 {
    grid-column: span 4 / span 4;
}
.grid
.grid_top_news_under_box.centerblock {
    grid-column-start: 4;
}
@media screen and (max-width: 640px){
.grid_top_news_under {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(auto, 1fr);
    gap: 16px;
}


.grid_top_news_under_box {
    grid-column: span 12 / span 12;
}
.grid_top_news_under_box03 {
    grid-column: span 6 / span 6;
}

.grid_top_news_under_box03_01 {
    grid-column: span 12 / span 12;
}
.grid_top_news_under_box.centerblock {
    grid-column-start: 1;
}
}



.topgrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
grid-column-gap: 40px;
grid-row-gap: 40px;
}
    
.topgrid {
    grid-column: span 6 / span 6;
}

.topgrid_sche {
    grid-column: span 6 / span 6;
    grid-column-start: 7;
}

.topgrid_book {
    grid-column: span 12 / span 12;
    grid-row-start: 2;
}


@media screen and (max-width: 640px){
.topgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
grid-column-gap: 16px;
grid-row-gap: 16px;
}
    
.topgrid {
    grid-column: span 4 / span 4;
}

.topgrid_sche {
    grid-column: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 3;
}

.topgrid_book {
    grid-column: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 2;
}
}


.grid_topmenu {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
}

.grid_topmenu_box {
    grid-column: span 2 / span 2;
}
.grid_topmenu_box img {
width: 100%;
}
.grid_topmenu_box a:hover img {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0.7;
}

@media screen and (max-width: 640px){
.grid_topmenu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 8px;
}
.grid_topmenu_box {
    grid-column: span 1 / span 1;
}
}

h4.title_topnews {
}

.content_info {
	border: 1px solid #BBB;
	padding: 2px;
	margin: 0;
	margin-bottom: 8px;
}
.content_info .inner {
padding: 8px 16px;
}
.content_info h2 {
	margin-bottom: 0;
}
.content_info h2 .imagecenter00 {
	margin: 0;
}

.toptitle_center {
	text-align: center;
	line-height: 120%;
}
.toptitle_center div {
	line-height: 100%;
color: #D25;
}





/************************************
** アクセス
************************************/

.page_access {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin: 0;
}
@media screen and (max-width: 640px){
  .page_access {
    display: block;
    margin: 0 0;
	margin-bottom: 32px;
  }
}

.page_address .data {
  padding: 16px 0;
  border-top: solid 1px #f3f3f3;
  align-items: center;
}
.page_address .data:last-of-type {
  border-bottom: solid 1px #f3f3f3;
}

.page_address,
.page_map {
  width: calc(50% - 32px);
}
@media screen and (max-width: 640px){
  .page_address,
  .page_map {
    width: 100%;
  }
}

.page_map_in {
position: relative;
display: block;
height: 100%;
overflow: hidden;
}
.page_map_in iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 640px){
.page_map_in {
height: 0;
margin: 0 -16px;
padding-bottom: 100%;
}
  .page_address {
    /* margin-bottom: 42px; */
  }
}

.data {
  padding: 8px 0;
  border-top: solid 1px #f2f2f2;
  display: flex;
  line-height: 1.5;
}

.data:last-of-type {
  border-bottom: solid 1px #f2f2f2;
}

.data_title {
  width: 30%;
}

.data_content {
  width: 70%;
}



.alternate_margin {
margin-bottom: 80px;
}

@media screen and (max-width: 640px){
.alternate_margin {
margin-bottom: 32px;
}
}

.alternate {
	display: flex;
	flex-direction: column-reverse;
}
.alternate + .alternate {
	margin-top: 16px;
}
.alternate__body {
	padding: 24px;
	background: #f9fae9;
		position: relative;
		z-index: 1;
}
.alternate__ttl {
	text-align: center;
  text-box-trim: trim-both;
}
.alternate__sttl {
	display: block;
  text-box-trim: trim-both;
}
.alternate__txt {
	margin-top: 16px;
	line-height: 1.7;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-box-trim: trim-both;
}
.alternate__thumb {
		position: relative;
		z-index: 2;
}
.alternate__thumb img {
	max-width: none;
	width: 100%;
}
/*ずらし用の指定*/
@media (max-width: 639px) {
	.alternate__body {
		margin-top: -40px;
		padding-top: 60px;
	}
	.alternate._normal .alternate__thumb {
		margin-left: -20px;
	}
	.alternate._normal .alternate__body {
		margin-right: -20px;
	}
	.alternate._reverse .alternate__thumb{
		margin-right: -20px;
	}
	.alternate._reverse .alternate__body{
		margin-left: -20px;
	}
}

@media (min-width: 640px) {
	.alternate {
		flex-direction: row-reverse;
		/* border: 1px solid red; */
	}
	.alternate + .alternate {
		margin-top: 64px; /*後続ボックスとの余白を確保*/
	}
	.alternate._reverse {
		flex-direction: row;
	}
	.alternate__body {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.alternate__thumb {
		width: 50%;
	}
	.alternate__thumb img {
		height: 100%;
		object-fit: cover;
	}
	/*ずらし用の指定*/
	/*【補足】比較のためあえてずらす前の指定とは別にずらすために追加したプロパティ類を分けて記述しています。実際にはセレクタを統合する必要があります*/
	.alternate__body {
		position: relative;
		z-index: 1;
		top: 40px; /*元の位置を基準に単純に40px下にずらす*/
		width: calc(50% + 80px); /*あらかじめ80px分広げる*/
	}
	.alternate__thumb {
		position: relative;
		z-index: 2;
	}
	.alternate._normal .alternate__body {
		margin-left: -80px; /*ネガティブマージンで広げた分を相殺*/
		padding-left: 110px; /*重なり分の余白を確保*/
	}
	.alternate._reverse .alternate__body {
		margin-right: -80px;
		padding-right: 110px;
	}
}



/* layout: 任意。全幅で使うなら .wrapper は不要です */
.wrapper {
  margin: 0 auto;
  padding: 0 0px;     /* 端の余白（任意） */
}

/* 画像を横幅100%・縦は自動で比率維持 */
.img-wrap img {
  width: 100%;
  height: auto;     /* ← 元画像のアスペクト比を保つポイント */
  display: block;   /* 余計な下の隙間を消す */
}

/* キャプション（任意） */
.img-wrap figcaption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 6px;
}


.photo-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 16px; /* 余白 */
  margin: 0 auto;
}

.photo-item img2 {
  width: 100%;       /* 横幅いっぱい */
  height: auto;      /* アスペクト比維持 */
  display: block;
  border-radius: 8px; /* 角丸 */
  object-fit: cover; /* はみ出し調整 */
}

/* スマホ表示は1列 */
@media (max-width: 640px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}


.photo-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 16px; /* 余白 */
  margin: 0 auto;
}


.photo-item img3 {
  width: 100%;
  aspect-ratio: 16 / 9; /* 横:縦 = 16:9 固定 */
  object-fit: cover;    /* 画像を枠内に収める */
  border-radius: 8px;   /* 角丸（任意） */
  display: block;
}

/* タブレットは2列 */
@media (max-width: 1024px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホは1列 */
@media (max-width: 600px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}





/* Grid layout */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    min-height: 100vh;
    gap: 40px;
    padding: 40px 20px;
    align-items: center;
}

.grid-item {
    width: 100%;
}

/* Content section */
.content-section {
    z-index: 10;
    padding: 20px;
}

.copilot-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    font-weight: 500;
}

h1.kyouikuhoushin {
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 20px;
}

.description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.description sup {
    font-size: 0.8rem;
    color: #0078d4;
}

.read-blog-btn {
    background-color: #FFF;
    color: #000;
    border: 1px solid #555;;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.read-blog-btn:hover {
    background-color: #CCC;
}

/* Icons section */
.icons-section {
    position: relative;
}
.icons-container {
    position: relative;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

/* Microsoft app icons */
.icon {
    width: 100%;
    height: 80px;
    max-width: 80px;
    border-radius: 12px;
    position: relative;
    transform-style: preserve-3d;
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
}


/* Responsive design */
@media (max-width: 640px) {
    .grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 20px;
    }
    
    .content-section {
        order: 1;
        text-align: center;
        padding: 10px;
    }
    
    .icons-section {
        order: 2;
    }
    
    
    .icons-container {
        height: 300px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 15px;
        padding: 10px;
    }
    
    .icon {
        height: 60px;
        max-width: 60px;
    }
    
    .floating-shape {
        display: none;
    }
}

@media (max-width: 480px) {
    .grid-container {
        padding: 15px;
    }
    
    .icons-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        height: 320px;
    }
    
    .icon {
        height: 50px;
        max-width: 50px;
    }
}





/* 全体 */
.functions {
  background: 202c9e;
  padding: 0 0;
}
.functions__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin: 0 auto;
}



/* 右側テキスト */
.functions__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.functions__heading {
  font-weight: 700;
  margin-bottom: 16px;
}
.functions__lead {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.functions__text {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 24px;
}




/* 左側グリッド */
.functions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}
.functions__item {
  border: 1px solid #eee;
  padding: 0 0;　/* boxの空き調整 */
  text-align: center;
  text-decoration: none;
  background: 202c9e;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 8px;
  transform-style: preserve-3d;
}


.functions__title {
  font-size: 16px;
  font-weight: 700;
  color: #202c9e; /* 赤色 */
  padding: 0 8px;
  margin-bottom: 8px;
}
.functions__title_min {
  font-size: 16px;
  font-weight: 700;
  padding: 0 8px;
  margin-top: 0;
  line-height: 1.2;
  margin-bottom: 8px;
}
.functions__desc {
  font-size: 13px;
  padding: 0 8px;
  color: #333;
  line-height: 1.6;
}

/* ボタン */
.functions__btn {
  display: inline-block;
  background: #c00;
  color: #fff;
  font-weight: 700;
  padding: 8px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s;
}
.functions__btn:hover {
  background: #a00;
}



@media (max-width: 640px) {
  .functions__inner {
    grid-template-columns: 1fr;
    grid-row-start: 1;
  }
  .functions__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-row-start: 2;
  }
}
  



/* ベース */
:root{
  --blue:#2a6fbd;       /* 見本に近い落ち着いたブルー */
  --blue-d:#1e56a2;
  --green:#3aa79a;      /* ティール寄りのグリーン */
  --green-d:#2e8f85;
  --text:#2b2b2b;
  --muted:#6b6f76;
  --band:#f3f5f7;       /* うっすらグレー帯 */
}

/* 帯（背景） */
.cta-band{
  background: var(--band);
  padding: 36px 20px;
}
.cta-inner{
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  justify-items: center;
  gap: clamp(24px, 6vw, 100px);
}

/* 各アイテム：中央揃え、見本の余白感 */
.cta-item{
  text-align: center;
  color: var(--text);
}

/* 円形ラインアイコン（見本の「線画＋外周円」） */
.cta-circle{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 4px auto 14px;
  border: 3px solid currentColor;     /* 枠色＝文字色 */
  line-height: 1;
}
.cta-circle i{
  font-size: 40px;
}

/* 見出し・説明文（行間・ウェイトを近づけ） */
.cta-title{
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0 8px;
}
.cta-desc{
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 18px;
}

/* カラー適用 */
.cta-blue{ color: var(--blue); }
.cta-green{ color: var(--green); }

/* 丸ボタン（pill・陰影弱め） */
.cta-btn{
  display: inline-block;
  min-width: 240px;
  padding: 12px 28px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.cta-btn-blue{ background: var(--blue); }
.cta-btn-blue:hover{ background: var(--blue-d); box-shadow: 0 4px 10px rgba(0,0,0,.12); }

.cta-btn-green{ background: var(--green); }
.cta-btn-green:hover{ background: var(--green-d); box-shadow: 0 4px 10px rgba(0,0,0,.12); }

/* レスポンシブ（スマホは1列） */
@media screen and (max-width: 640px) {
  .cta-inner{ grid-template-columns: 1fr; gap: 28px; }
  .cta-btn{ min-width: 220px;
}
}



.grid_double00 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 80px;
	align-items: center;
}
.grid_doublebox00 {
    grid-column: span 6 / span 6;
}

@media screen and (max-width: 1280px) {
.grid_double00 {
    gap: 40px;
}
}

@media screen and (max-width: 640px) {
.grid_double00 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.grid_doublebox00 {
    grid-column: span 12 / span 12;
}
}

.grid_box6 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
}
.grid_box6box {
    grid-column: span 4 / span 4;
}
.grid_box3box {
    grid-column: span 6 / span 6;
}



@media (max-width: 640px){
.grid_box6 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.grid_box6box {
    grid-column: span 6 / span 6;
}
.grid_box3box {
    grid-column: span 6 / span 6;
}
}



.card {
display: flex;
flex-flow: column;
width: 100%;
align-items: center;
align-content: center;
    background-color: #a8c8e8;
    border: none;
    padding: 20px 20px;
    text-align: center;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
	margin-bottom: 10px;
}

.grid_box6box.card p {
position: relative;
margin-bottom: 0;
display: flex;
flex-flow: column;
align-items: center;
align-content: center;
z-index: 3;
}

.card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    background-color: transparent;
    border: 3px solid #87CEEB;
}

.card-text {
    color: white;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.5px;
}


/* ボタン */
.btn {
  display:inline-block;
  min-width: 330px;
  padding: 21px 33px;
    font-size: 150%;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color:#fff;
  background:#999;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .03s ease, filter .2s ease;
  border: 2px solid #fff6;
  margin-bottom: -16px;
}
.btn:hover{ filter:brightness(1.03) contrast(1.02); transform: translateY(-1px); }
.btn:active{ transform: translateY(1px); }

.btn--mint{ background: linear-gradient(#47d7ca,#1fb8a9); }
.btn--rose{ background: linear-gradient(#f06b86,#d64a64); }




/* 下段ボタン */
.bt_top_bottom {
    background-color: #a8c8e8;
    border: none;
    padding: 2.5em 2px;
	padding-bottom: 2em;
	display: block;
    text-align: center;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
	margin-bottom: 13px;
}

.bt_top_bottom::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    background-color: transparent;
    border: 3px solid #87CEEB;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);  /* 枠線に影 */
}
.bt_top_bottom-text {
    color: #000;
	font-size: 105%;
    line-height: 1.2;
    font-weight: 600;
	padding-left: 0.8em;
}
@media (max-width: 640px){
.bt_top_bottom {
    padding: 2.0em 2px;
	padding-bottom: 1.10em;
	font-size: 100%;
	margin-bottom: 8px;
}
.bt_top_bottom::before {
    border: 2px solid #87CEEB;
    top: 5px;
    left: 5px;
    right: -5px;
    bottom: -5px;
}
.bt_top_bottom-text {
	padding-left: 0.2em;
}
}

.bt_top_bottom.bt_top_bottom001 {
    background-color: #f7c7dc;
}
.bt_top_bottom.bt_top_bottom001::before {
    border-color: #eb6da5;
}

.bt_top_bottom.bt_top_bottom002 {
    background-color: #d8a9cd;
}
.bt_top_bottom.bt_top_bottom002::before {
    border-color: #a661a4;
}

.bt_top_bottom.bt_top_bottom003 {
    background-color: #9dd8f6;
}
.bt_top_bottom.bt_top_bottom003::before {
    border-color: #00a0e9;
}

.bt_top_bottom.bt_top_bottom004 {
    background-color: #fcd372;
}
.bt_top_bottom.bt_top_bottom004::before {
    border-color: #f08200;
}