@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');


/*keyframes.cssの読み込み
---------------------------------------------------------------------------*/
@import url("keyframes.css");

:root {
    --primary-color:#103A71;
    --secondary-color:#2D7FF9;
	--accent-color:#00C2B8;
}

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* RESET
----------------------------------------------------------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:2.2;text-align:left}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:2.2;text-align:left}article,footer,header,nav,section,main{display:block}table{border-collapse:collapse;border-spacing:0}

/* ALL
---------------------------------------------- */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;*behavior:url(/scripts/boxsizing.htc)}.clr:after,.col:after,.container:after,.row:after{content:"";display:table;clear:both}.row{padding-bottom:0}.col{display:block;float:left;width:100%}

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #999;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #FFF;
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
/*video {max-width: 100%;}
iframe {width: 100%;}*/

section .inner{ margin-top: 60px;}

hr.break{ display: none;}
.bg_white{background-color: #FFF;}
.heigh100{height:100px;}

/* PATH
---------------------------------------------------------------------------*/
.path {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	font-size: 14px;
	position: absolute!important; top: 0!important; left:0!important;
}
.path ul{ margin:0; padding: 0; }
.path li:not(:last-of-type)::after, .path_home::before{
	font-family: "Font Awesome 6 Free"; margin: 0 .6em; font-weight: 900; color:#FFFFFF;
}
.path li:not(:last-of-type)::after	{content: "\f105";}
.path_home::before					{content: "\f015";}
.path a{text-decoration: none; color:#FFFFFF;}

/* LINK
---------------------------------------------------------------------------*/
a {color: var(--primary-color);transition: 0.2s;}
a:hover {color: var(--secondary-color);text-decoration: none;}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul,ol{padding: 0 3% 20px 1rem;}

ul.disc {list-style: disc;}
ul.disc ul, ol ul{list-style-type: circle;padding: 0 3% 20px 3%;}
ol {list-style: decimal;}
ul.no_litype{list-style-type: none;}
ol.Uline li{border-bottom: 1px dashed #999;}
ul li{ margin-left:1rem;}

/* TABLE 
---------------------------------------------------------------------------*/
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
.tbl{ width:90%; margin:0 auto; border-spacing:inherit; border-collapse:collapse; box-sizing:border-box;empty-cells: show;}

.tbl td, .tbl th{ border:1px solid #c9c9c9; margin:0; padding:1%;}
.tbl th{ text-align:left; background:rgba(201,201,201,0.6);}

.performance-table table {
    width: 100%;
    background: #fff;
}

.performance-table th,
.performance-table td {
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.performance-table th {
    background: #f5f7fa;
    font-weight: 600;
}

.performance-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.performance-table tbody tr:hover {
    background: #fafafa;
}

.performance-table .table-note {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #666;
}
/*
---------------------------------------------------------------------------*/
.tier-section{
    margin:80px 0;
}

.tier-grid{
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.tier-item{
	display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
	
    flex:1;
    min-width:220px;
    max-width:280px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:28px 24px;
    text-align:center;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
    transition:.3s;
}

.tier-item:hover{
    transform:translateY(-5px);
}

.tier-icon{
    font-size:2.5rem;
    margin-bottom:16px;
	text-align: center;
}

.metadata .tier-icon{
    color:#8b5cf6;
}

.fast .tier-icon{
    color:#06b6d4;
}

.master .tier-icon{
    color:#22c55e;
}

.archive .tier-icon{
    color:#f59e0b;
}

.tier-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    color:#94a3b8;
}


.tier-item h3{
    margin:0 0 8px;
    font-size:1.2rem;
	text-align: center;
}

.tier-item span{
    display:block;
    color:#2563eb;
    font-weight:600;
    margin-bottom:15px;
}

.tier-item p{
    margin:0;
    color:#555;
    line-height:1.7;
    font-size:.95rem;
}

.tier-arrow{
    display:flex;
    align-items:center;
    font-size:2rem;
    color:#94a3b8;
    font-weight:bold;
}

/* Tier別カラー */

.metadata{
    border-top:5px solid #8b5cf6;
}

.fast{
    border-top:5px solid #06b6d4;
}

.master{
    border-top:5px solid #22c55e;
}

.archive{
    border-top:5px solid #f59e0b;
}

.tier-summary{
    max-width:1000px;
    margin:40px auto 0;
    text-align:center;
    font-size:1.05rem;
    line-height:1.9;
    color:#555;
}

@media(max-width:1000px){

    .tier-grid{
        flex-direction:column;
    }

    .tier-arrow{
        justify-content:center;
        transform:rotate(90deg);
    }

    .tier-item{
        max-width:none;
    }
}

.tier-badge{
    display:inline-block;
    padding:6px 12px;
    margin-bottom:14px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.metadata .tier-badge{
    background:#f3e8ff;
    color:#7c3aed;
}

.fast .tier-badge{
    background:#cffafe;
    color:#0891b2;
}

.master .tier-badge{
    background:#dcfce7;
    color:#16a34a;
}

.archive .tier-badge{
    background:#fef3c7;
    color:#d97706;
}
.tier-device{
    display:block;
    margin-bottom:16px;
    font-weight:600;
    color:#2563eb;
}
/*　SOLUTION GRID
-------------------------------------------------*/
/*　layout
-----------------------------*/
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin:60px 0;
}

.grid_2 { grid-template-columns: repeat(2, 1fr); }
.grid_3 { grid-template-columns: repeat(3, 1fr); }
.grid_4 { grid-template-columns: repeat(4, 1fr); }
.grid_5 { grid-template-columns: repeat(5, 1fr); }

/*　共通
-----------------------------*/
.solution-card, .product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:35px 30px;
    transition:.3s ease;
}

.solution-badge{
    display:inline-block;
    padding:6px 14px;
    margin-bottom:18px;
    border-radius:999px;
    background:#eef2ff;
    color:#4338ca;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
}

.solution-icon{
    font-size:2.5rem;
    margin-bottom:18px;
    color:var(--primary-color);
}

.solution-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 32px rgba(0,0,0,.08);
}

.product-card h4{
    margin-bottom:6px;
    font-size:1rem;
}

.solution-card h3,.product-card h3{
    margin-bottom:12px;
    font-size:1.2rem;
}

.solution-card p{
    color:#666;
    line-height:1.8;
}

@media(max-width:768px){

    .architecture-grid{
        grid-template-columns:1fr;
    }

}
/*　色
-----------------------------*/
.badge-blue{	background:#dbeafe; color:#1d4ed8; }
.badge-green{	background:#dcfce7; color:#15803d; }
.badge-orange{	background:#fef3c7; color:#b45309; }
.badge-purple{	background:#f3e8ff; color:#7c3aed; }
.badge-red{		background:#fee2e2; color:#dc2626; }
.badge-cyan{	background:#cffafe; color:#0891b2; }


/* CARD Background(背景ありカード)
----------------------------------------*/
.card_stats {
	padding: 80px 0;
	background: #f7f9fc;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.card_stats h4 {
	text-align: center;
}

/* 共通 */
.stats_grid {
	display: grid;
	gap: 30px;
	padding: 0 2%;
	list-style: none;
	margin: 0;
}

.stat_card {
	background: #fff;
	border-radius: 16px;
	padding: 40px 30px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
	transition: all .3s ease;
}

.stat_card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0,0,0,.10);
}

.stat_card h2,.stat_card h3 {
	margin: 0 0 10px;
	font-weight: 700;
	line-height: 1;
	color: #103A71;
	text-align: center;
}
.stat_card h2{ font-size: 30px;}
.stat_card h3{ font-size: 20px;}
.stat_card p {
	margin: 0;
	font-size: 1rem;
	color: #666;
	text-align: center;
}

@media (max-width: 768px) {
	.stats_grid {
		grid-template-columns: 1fr !important;
		gap: 20px;
	}
	.stat_card {
		padding: 30px 20px;
	}
	.stat_card h2 {
		font-size: 2.8rem;
	}
}

/*　LIST*/
/*.audit-icons{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:20px;
	margin:40px 0;
	flex-wrap:wrap;
}*/
.meta_item{
	display:flex;
	align-items:center;
	gap:15px;
	padding:18px;
	border-radius:12px;
	background:#fff;
	border:1px solid #edf2f7;
	box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.audit-item i{
	display:block;
	font-size:2rem;
	color:#103A71;
	margin-bottom:10px;
	text-align: center;
}

.audit-item span{
	display:block;
	font-size:.9rem;
	font-weight:600;
	line-height:1.5;
	color:#333;
	text-align: center;
}
.audit-item{
	flex:1;
	text-align:center;
	position:relative;
}

.audit-item:not(:last-child)::after{
	content:"";
	position:absolute;
	right:-10px;
	top:15%;
	width:1px;
	height:70%;
	background:#dbe3ee;
}


/**/

.forensic-meta{
	margin-top:50px;
}

.meta_item{
	display:flex;
	align-items:center;
	gap:15px;
}

.meta_icon{
	width:56px;
	height:56px;
	flex-shrink:0;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:12px;
	font-size:1.3rem;
}

.meta_item span{
	font-weight:600;
	line-height:1.4;
}
/* Metadata */
.meta_blue{
	background:#e8f1ff;
	color:#1f4fa3;
}

/* Lifecycle */
.meta_green{
	background:#e8f8ef;
	color:#198754;
}

/* Archive */
.meta_orange{
	background:#fff3e6;
	color:#d97706;
}

.meta_purple{
	color:#7c3aed;
}

/**/
.archive-audit-flow{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:20px;
	margin:40px 0;
	flex-wrap:wrap;
}

.archive-audit-node{
	flex:1;
	min-width:120px;
	text-align:center;
	position:relative;
}

.archive-audit-node i{
	display:block;
	font-size:2rem;
	color:#103A71;
	margin-bottom:10px;
}

.archive-audit-node span{
	display:block;
	font-size:.9rem;
	font-weight:600;
	line-height:1.5;
	color:#333;
}

.archive-audit-node:not(:last-child)::after{
	content:"";
	position:absolute;
	right:-10px;
	top:15%;
	width:1px;
	height:70%;
	background:#dbe3ee;
}

.future_section .card_icon,
.card .card_icon{
	width:96px;
	height:96px;
	margin:0 auto 25px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:24px;
	font-size:2.5rem;
	box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* CODE表記
-------------------------------------------------------*/
.card{
	background:#fff;
	border:1px solid #edf2f7;
	border-radius:16px;
	padding:30px;
	height:100%;
	box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.card.taC{
	text-align:center;
}

.card h3{
	margin:20px 0 15px;
}

.card p:last-child{
	margin-bottom:0;
}
/*.card pre{
	color:#FFFFFF;
	padding:20px;
	border-radius:12px;
	overflow-x:auto;
	font-size:.85rem;
	line-height:1.6;
	text-align:left;
	margin-top:20px;
}

.card code{
	font-family:Consolas, Monaco, monospace;
	background:#0f172a;
	color: #ffffff;
}*/

.code{ margin: 0; padding: 0;}
.code pre{
	margin:0;
	overflow-x:auto;
	background:none;
	padding:0;
}

.code code{
	display:block;
	background:#0f172a;
	color:#fff;
	padding: 0px 16px 16px 16px;
	border-radius:12px;
	line-height:1.6;
	font-size:.85rem;
	box-shadow:0 4px 12px rgba(0,0,0,.15);
	max-width:1000px;
}

/* INNER
---------------------------------------------------------------------------*/
.inner {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 2%;
	padding-right: 2%;
}

/* HEADER
---------------------------------------------------------------------------*/
header {position: relative;	padding: 0px; margin: 0; width: 100%;}
.home header {padding: 0px;}

.h_logo{width: 200px; margin-top: -4px; }

/* CONTENTS
---------------------------------------------------------------------------*/
#contents {
	margin:0;
	padding: 40px 0 50px 0;
	position: relative;
	animation-name: opa2;
	animation-duration: 0.5S;
	animation-delay: 0.5s;
	animation-fill-mode: both;
	background: #FFF;
	/*order: 1px solid red;*/
}

#contents section + section {
	margin-top: 100px;
}

section{ padding: 1rem ;}

/* GRID
---------------------------------------*/
.grid_2{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:40px;
}
.grid_2 > div{
	padding:30px;
	background:#fff;
	border-radius:6px;
	box-shadow:0 8px 24px rgba(0,0,0,.08);
	transition:.3s;
}

.grid_2 > div:hover{
	transform:translateY(-6px);
	box-shadow:0 16px 32px rgba(0,0,0,.12);
}

/*GRID 3
--------------------*/
.grid_3 {
	 display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 32px;
}

.grid_3 > div {
  /*background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);*/
	padding: 30px 20px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	text-align: center;
	will-change:transform;
	/*border-left:4px solid transparent;*/
    border-radius:6px;
    transition:.3s;
}
/*.grid_3 > div:hover,
.grid_4 > div:hover{
	transform:translateY(-6px);
	box-shadow:0 16px 32px rgba(0,0,0,.12);
	border-left-color:var(--secondary-color);
    transform:translateY(-6px);
}*/

.grid_3 div h3{
	transition:color .3s ease;
}

.grid_3 div:hover h3{
	color:var(--secondary-color);
}

.grid_3 div:hover::before{
	transform:scaleX(1);
}

/*GRID 4
--------------------*/
.grid_4{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:30px;
}
@media (max-width:768px){
	.grid_2,
	.grid_3,
	.grid_4{
		grid-template-columns:1fr;
	}
}
/* COLMS
---------------------------------------*/
.colms_title{ width:100%; text-align:center;font-size:1.6rem;font-weight:bold;}
.colms_text { width:100%; flex-grow:1; padding:10px;box-sizing:border-box;}
.colms div img{ margin:1% auto; display: block;}
.colms02 > div, .colms > div, .colms04 > div{ display: flex; flex-direction: column;}

/* COLMS 2CONTENTS
---------------------------------------*/
.colms02{display: flex; flex-wrap: wrap; gap:30px; margin: 2%;}

.colms02 > div{
	border:1px solid #999999;
	border-radius: 6px;
	box-shadow: 6px 6px #c7c7c7;
	margin: 1%;
	padding: 2rem;
	flex: 1 1 440px;
}
.colms02 .colms_border{border:1px solid #c9c9c9; border-radius: 6px;}
.colms02 .colms div h3,.colms div h4{border: none!important;}

/* COLMS 3CONTENTS
---------------------------------------*/
.colms{display: flex; flex-wrap: wrap; gap:20px; margin: 2%;}

.colms > div{
	border:1px solid #999999;
	border-radius:6px;
	box-shadow: 6px 6px #c7c7c7;
	padding:2rem;
	flex: 1 1 330px
}
.colms_border{border:1px solid #c9c9c9; border-radius: 6px;}
.colms div h3,.colms div h4{border: none!important;}
.colms .btn01{margin: 1% auto;}
#page_support .colms div:hover{background-color: rgba(223,231,233,0.50);}

/* COLMS 4CONTENTS
---------------------------------------*/
.colms04{ display:grid; gap:20px; margin: 2%;}

.colms04 > div{
	border:1px solid #999999;
	border-radius: 6px;
	box-shadow: 6px 6px #c7c7c7;
	margin: 1%;
	padding: 2rem;
	flex: 1 300px;
	background-color: #ffffff;
}
.colms04 h3{font-size: 20px; font-weight: bold;}


/* NUMBER COLUMN
---------------------------------------*/
.num_contena{position: relative;}

.num_contena h3{
	position: relative;
	font-size: 26px;
	border-left: none!important;
	padding-top:12px;
}
.num_contena h3::before {
	content: attr(data-number);
	position: relative;
	top: -20px;
	left: -10px;
	display: block;
	color: #64839b;
	font-size: 30px;
}

.num_contena h3::after {
	content: '';
	position: absolute;
	top: -40px;
	left: 0;
	width: 100px;
	height: 1px;
	background-color: #64839b;
}
.num_contena div div{width: 46%; margin: .6rem;padding: 3rem 1rem; border: 1px solid #9c9c9c;border-radius: 15px;}
.num_contena div div p{line-height: 32px;}
.num_contena div div h3 img{margin-left:12px;padding: 0;width: 64px; height: auto;position: absolute; top: -24px; right: 12px;}

/* BUTTON
---------------------------------------*/
.button_01 a {
	font-family: 'Noto Sans JP', serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #fff;
	background: var(--primary-color);
	font-weight: 700;
	border: solid 3px var(--primary-color);
	border-radius: 999px;
	display: block;
	box-sizing: border-box;
	max-width: 300px;
	text-align: center; 
	padding: 16px 64px;
	margin: 24px;
	margin-inline: auto;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s;
}
.button_01 a:hover {
  color: var(--primary-color);
  background: initial;
  transition: all 0.3s;
}

/**/
.btnR{ width: 100%; text-align: right;}
.btnR a{margin: 2% auto; padding: 0; display: block;text-align: right;}

.btn01 a {
    background: #7C8D9C;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2% 0;
    max-width: 250px;
    padding: 10px 25px;
    color: #FFFFFF;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	border-radius:6px;
}
.btn01 a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -1.6em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #004c6d;
    transition: 0.3s;
}
.btn01 a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.6em;
    transform: translateY(-50%);
    width: 50px;
    height: 2px;
    background-color: #004c6d;
    transition: 0.3s;
}
.btn01 a:hover:before, .btn01 a:hover:after {
    right: -2.5em;
}
.btn01 a:hover {
    background: #edf6ff;
    color: #004c6d;
	border:1px solid #004c6d;
}
/* BUTTON2 */
.btn02 a{
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 220px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.btn02 a::before {
  content: '';
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 100%;
  height: 2px;
  background-color: #bbbbbb;
  transition: 0.2s ease 0s;
}

.btn02 a::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -7px;
  width: 2px;
  height: 100%;
  background-color: #bbbbbb;
  transition: 0.2s ease 0.2s;
}

.btn02 a:hover::before {
  width: 0%;
}

.btn02 a:hover::after {
  height: 0%;
}

.btn02 a:hover {
  text-decoration: none;
  background-color: #ccc;
}

/* BUTTON03 */
.btn03 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    width: auto;
    padding: 10px 25px 10px 60px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #64839b;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 1px;
}
.btn03 a::before {
    content: "";
    width: 30px;
    height: 90%;
    position: absolute;
    background: #FFF;
    left: 14px;
    top: -1px;
    clip-path: polygon(100% 0%, 100% 100%, 50% 75%, 0 100%, 0 0);
}
.btn03 a::after{
    font-family: "Font Awesome 5 Free";
    content: "\f1c1";
    position: absolute;
    left: 24px;
    top: 7%;
    color: #64839b;
}
.btn03 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

/* BUTTON04 */
.btn04 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 220px;
    padding: 10px 25px;
    color: #333333;
    transition: 0.3s ease-in-out;
    font-weight: normal;
    background: #eee;
	text-decoration: none;
}
.btn04 a:hover {
    background: #ebfcfe;
    color: #64839b;
}
.btn04 a:before, .btn04 a:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.btn04 a:before {
  top: 0;
  left: 0;
}
.btn04 a:after {
  bottom: 0;
  right: 0;
}
.btn04 a:hover:before, .btn04 a:hover:after {
  width: 100%;
  height: 100%;
}
.btn04 a:hover:before {
  border-top-color: #64839b;
  border-right-color: #64839b;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.btn04 a:hover:after {
  border-bottom-color: #64839b;
  border-left-color: #64839b;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}

/* FLOW DESIGN 
--------------------------------------- */
.flow_des {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 20px;
	margin-top: 40px;
}
.flow_des ul { padding: 0;}
.flow_des li { list-style-type: none;}
.flow_des dd { margin-left: 0;}

.flow { position: relative;}
.flow::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}
.flow > li { position: relative;}
.flow > li:not(:last-child) { margin-bottom: 60px;}
.flow > li .flow_icon {
  font-size: 0.8em;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #64839b;
  display: inline-block;
  margin-right: 0.3em;
}

.flow > li dl { padding-left: 70px; position: relative;}
.flow > li dl::before,
.flow > li dl::after { content: ""; display: block; position: absolute; top: 15px;}
.flow > li dl::before {width: 7px; height: 7px; margin-top: -3px; background: #64839b; border-radius: 50%; left: -4px;}
.flow > li dl::after { width: 50px; border-bottom: 1px dashed #999; position: absolute; left: 5px;}
.flow > li dl dt { font-size: 1.3em; font-weight: 600; color: #64839b; margin-bottom: 0.5em; display: flex; align-items: center;}

/* IMAGE
---------------------------------------*/
.img_right, .img_left{margin:0 1rem;}
.img_right{float:right;}
.img_left{float: left;}

/* FADEIN
---------------------------------------*/
.effect-fade {
	opacity : 0;
	transform : translate(0, 30px);
	transition : all 300ms;
}
.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}

.effect2 .effect-fade:nth-of-type(2) {-moz-transition-delay:200ms;-webkit-transition-delay:200ms;-o-transition-delay:200ms;-ms-transition-delay:200ms;}
.effect2 .effect-fade:nth-of-type(3) {-moz-transition-delay:400ms;-webkit-transition-delay:400ms;-o-transition-delay:400ms;-ms-transition-delay:400ms;}
.effect2 .effect-fade:nth-of-type(4) {-moz-transition-delay:600ms;-webkit-transition-delay:600ms;-o-transition-delay:600ms;-ms-transition-delay:600ms;}
.effect2 .effect-fade:nth-of-type(5) {-moz-transition-delay:800ms;-webkit-transition-delay:800ms;-o-transition-delay:800ms;-ms-transition-delay:800ms;}
.effect2 .effect-fade:nth-of-type(6) {-moz-transition-delay:1000ms;-webkit-transition-delay:1000ms;-o-transition-delay:1000ms;-ms-transition-delay:1000ms;}
.effect2 .effect-fade:nth-of-type(7) {-moz-transition-delay:1200ms;-webkit-transition-delay:1200ms;-o-transition-delay:1200ms;-ms-transition-delay:1200ms;}
.effect2 .effect-fade:nth-of-type(8) {-moz-transition-delay:1400ms;-webkit-transition-delay:1400ms;-o-transition-delay:1400ms;-ms-transition-delay:1400ms;}
.effect2 .effect-fade:nth-of-type(9) {-moz-transition-delay:1600ms;-webkit-transition-delay:1600ms;-o-transition-delay:1600ms;-ms-transition-delay:1600ms;}
.effect2 .effect-fade:nth-of-type(10) {-moz-transition-delay:1800ms;-webkit-transition-delay:1800ms;-o-transition-delay:1800ms;-ms-transition-delay:1800ms;}
.effect2 .effect-fade:nth-of-type(11) {-moz-transition-delay:2000ms;-webkit-transition-delay:2000ms;-o-transition-delay:2000ms;-ms-transition-delay:2000ms;}

/* SLIDEIN
---------------------------------------*/
.slidein{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  border-radius: 8px;
  width: 600px;
  height: 200px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0,0,0,0.8);
  font-size: 36px;
  transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
}
.slide_left{
  transform: translateX(calc(-50vw - 50%));
}
.slide_right{
  transform: translateX(calc(50vw + 50%));
}
.show{
  transform: translateX(0);
}

/* FLEX-BOX
---------------------------------------*/
.effect2{display:flex; align-content: space-around; align-items: stretch;  justify-content:space-around; align-self:center;  margin:1rem auto; padding:1rem; flex-wrap:wrap; gap:20px;}
.fl_box{ display:flex; align-content: space-around; align-items:stretch; justify-content: space-around; margin:1%; padding:1%; flex-wrap:wrap; gap:20px;}
.fl_box > div{flex: 1; min-width: 0; white-space: normal; flex-wrap: wrap;}

/* FLEX-BOX(IN SUB CONTENTS)
-------------------*/
.fl_colum{width:100%;height:auto; display:flex;justify-content:space-between; padding:20px;}
.fl_colum_child{ width:100%;height:auto; border:1px solid #ccc; border-radius: 6px; display:flex;flex-direction:column; padding:20px; margin: 1%; box-sizing:border-box;}
.fl_colum_title{ width:100%; text-align:center;font-size:1.6rem;font-weight:bold;}
.fl_colum img {  display:block; width:300px; height:auto; margin: 1% auto; padding: 0;}
#page_service .fl_colum img {  display:block; width:auto; height:auto; margin: 1% auto; padding: 0;}
.fl_colum_text { width:100%; flex-grow:1; padding:10px;box-sizing:border-box;}
.fl_colum a{ display:flex; justify-content:center; align-items:center; width:200px;height:48px; margin:0 auto; border-radius:6px;}
.fl_colum a i{ margin-left:5px;}

.fl_jc_spb{ justify-content:space-between}
.fl_jc_c{ justify-content:center;}
.fl_jc_s{justify-content: flex-start;}
.fl_dire_row{flex-direction: row-reverse;}
.fl_dire_c{flex-direction: column; align-items: center;}
.fl_al_item{align-items: stretch;}
.fl_al_item_c{ align-items:center;}
.fl_al_item_end{ align-items:flex-end}
.fl_al_se_e{align-self: flex-end;}
.fl_al_se_c{align-self: center;}
.fl_wrap{flex-wrap:wrap;}

.fl_blank{ display: block; visibility:hidden;}
.fl_box div img{flex: 1; margin: 0 auto;padding: 0;}
.fl_half div, .about .s_menu_title div, .home .s_menu_title div {width:48%; margin: 0; padding: 1%; overflow-wrap: break-word;}
.fl_txt_img div:first-child{width: 60%;}
.fl_txt_img div:nth-child(2){width: 40%; text-align: center;}

/* VIDEO
---------------------------------------------- */
.bg-video-wrap{ margin:0; padding:0; width:100%; height:800px; position: relative; top:-100px;right:0;left:0;bottom:0;overflow:hidden; z-index: -1;}

#video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

.overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #FFF;
  z-index: 1;
  pointer-events: none;
}

/* VIDEO-TXT STYLE 
----------------------- */
.video_txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666666;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.4;
	z-index: 2;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	width: 100%;
}
.video_txt span {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1.5s ease-out forwards;
	text-align: center;
}
.video_txt span:nth-child(1) { animation-delay: 0.5s; }
.video_txt span:nth-child(2) { animation-delay: 1.0s; }
.video_txt span:nth-child(3) { animation-delay: 1.5s; }
.video_txt span:nth-child(4) { animation-delay: 2.0s; }


/*その他
---------------------------------------------------------------------------*/
.clear {clear: both;}
.taC {text-align: center !important;}
.taR {text-align: right !important;}
.taL {text-align: left !important;}
.taC_img{margin: 0 auto; padding: 0; text-align: center!important;display: block;}
.fl {float: left;}
.fr {float: right;}

.bg_blue_line{
	background-color: #ECECEC;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 7px 7px;
}
.bg_blue_line .bg_white{padding: 2%;}

.radius_txt{background:url("../images/bg_radius.png") no-repeat center center; background-size: contain; margin: 2%;}
.radius_txt p{ padding: 1% 10%;}
.radius_txt h3{ padding-top: 5rem; border: none!important;}

/* TOP CONTENTS SUB-MENU */
.about .s_menu_title, .home .s_menu_title{display:flex; align-content: space-around; align-items:stretch; justify-content: space-around; margin:auto; padding:1%; flex-wrap:wrap;}
.about .s_menu_title_img, .home .s_menu_title_img{width: 50%; height: 70vh;}

.s_menu_gds, .s_menu_sol,.s_menu_ser,.s_menu_sup{
	width:100%;
	min-height: 450px;
	height:100%;
	line-height: 2;
	margin: 0;
	padding: 0;
	position: relative;
}

/* TOP CONTENTS BANNER IMG */
.s_menu_gds.reverse, .s_menu_sup.reverse{ flex-direction: row-reverse;}
.s_menu_gds div:nth-child(2){background: url("../images/mimg_gds.jpg") no-repeat center center / cover #FFFFFF; border-radius: 6px;}
.s_menu_sup.reverse div:nth-child(2){background: url("../images/img_sup.jpg") no-repeat center center / cover #FFFFFF; border-radius: 6px;}
.s_menu_com div:nth-child(2){background: url("../images/mimg_com.jpg") no-repeat left center / cover #FFFFFF; border-radius: 6px;}
.s_menu_ser div:nth-child(2){background: url("../images/img_ser.jpg") no-repeat left center / cover #FFFFFF; border-radius: 6px;}


.s_menu_ser_ul{ list-style-type: none; margin: 0; padding: 0; width: 300px; border:1px dotted red;}
.s_menu_ser_ul img{width: 30px; height: auto;}
.s_menu_ser_ul li {font-size: 16px; line-height: 140%;}
.s_menu_ser_ul a{ text-decoration: none;}
/*.s_menu_ser_ul h3{font-size: 18px;}
.s_menu_ser_ul p{font-size: 16px;}*/

.s_menu_card > div{border:1px solid rgba(190,196,196,1.00); border-radius: 6px; margin:1%; padding: 1%; background-color: rgba(144,144,144,1.00);}
.s_menu_card img { width: 80px; height: auto; transition: transform 0.3s ease; position: absolute; top:8px; right:8px;}
.s_menu_card div:hover img{ transform: scale(1.05);}
.s_menu_card div:hover{ filter: brightness(1.4);}
.s_menu_card div h3 { font-size:18px; font-weight: normal; margin: .6rem auto .6rem .6rem;padding-bottom: .6rem; }
.s_menu_card div p  { width:85%; font-size: 14px;}
.s_menu_card div a  { color:#FFFFFF; text-decoration: none;}
.s_menu_card div a i{ color: #FFF;}
.s_menu_card div i  { position: absolute; bottom:4%;right: 2%; font-size:2.5rem;transition: font-size 0.3s ease;}
.s_menu_card div:hover i{font-size:3rem;}

/* BANNER
---------------------------------------------------------------------------*/
#S_banner{width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: center; margin: 0;padding: 0 3%; position: relative;}
.about #S_banner{ background: url("../images/bn_company.png") no-repeat center 10% / cover #FFFFFF ; margin-top:0px;}
.contact #S_banner{background: url("../images/bg_post.jpg") no-repeat left 20% / cover #FFFFFF ; margin-top:0px;}
.contact #S_banner p, .contact #S_banner h1{color: #333333; text-align: center;}
#page_support #S_banner{background: url("../images/bn_support.png") no-repeat left 65% / cover #FFFFFF ; margin-top:0px;}
#page_service #S_banner{background: url("../images/bg_service_top.png") no-repeat center center / cover #FFFFFF ; margin-top:0px;}
#page_product #S_banner{background: url("../goods/img/bn_product.png") no-repeat center center / cover #ffff  ;margin-top:0;}
#page_product #S_banner.aigfs_banner{background: url("../goods/img/bn_aigfs.png") no-repeat center center / cover #ffff  ;margin-top:0;}
#page_solution #S_banner{background: url("../solution/img/bg_sol.png") no-repeat center center / cover #ffff ;margin-top:0;}

.bannerNo #S_banner{background: url("../images/bg_notfound.png") no-repeat  center center / cover #FFFFFF ; margin-top:10px;}

/* BANNER FONT*/
#S_banner div h1{ padding:0; margin: 1% 0; font-size: 4rem;}
#S_banner div{color: #FFFFFF;opacity: 0.7;}

#page_goods #S_banner .path{ maggin-left:-1rem!important;} 

/* PRODUCTS,SERVICE,SUPPOST INDEX MENU
---------------------------------------------------------------------------*/
.colms.s_menu_index h3{ margin: 0 0 0 -12px;padding: 0%; font-size: 18px;}
.colms.s_menu_index .fl_colum_text{line-height: 140%;}
.colms.s_menu_index img{ width: 300px;height: auto; margin: 2% auto;}
#page_service .colms.s_menu_index img,
#page_support .colms.s_menu_index img { width: 150px;height: auto; margin: 2% auto;}

/* ABOUT
---------------------------------------------------------------------------*/
/*.about_menu { display: flex; justify-content: center; text-align: center; align-content: center; background-color: #FFFFFF; margin-top:60px;}
.about_menu li {width: 30%; max-width: 200px; margin: 0; padding: 10px 20px;}*/


.tab_contents h2 .txt_b_shadow{font-size: 110%!important;}

.bg_gleeting p{background: rgba(255,255,255,.8);margin: 1%; padding: 2rem;}

.about_menu {width: 100%;margin-top: 20px;}
.about_menu input {display: none;}

.tab_labels {
	position: relative;
	display: flex;
	justify-content: space-around;
	border-bottom: 2px solid #fff;
	margin-bottom: 20px;
}
.tab_labels label {
	lex: 1;
	padding: 1em;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.tab_labels .underline {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: #006d8f;
	width: 33.3333%;
	transition: transform 0.3s ease;
	z-index: 0;
	transform: translateX(0%);
}
#tab2:checked ~ .tab_labels .underline { transform: translateX(100%);}
#tab3:checked ~ .tab_labels .underline { transform: translateX(200%);}

#tab1:checked ~ .tab_labels label[for="tab1"],
#tab2:checked ~ .tab_labels label[for="tab2"],
#tab3:checked ~ .tab_labels label[for="tab3"] {	color: #006d8f;}
.tab_contents > div {display: none;	padding: 2em 1em;}
#tab1:checked ~ .tab_contents > div:nth-child(1),
#tab2:checked ~ .tab_contents > div:nth-child(2),
#tab3:checked ~ .tab_contents > div:nth-child(3) { display: block;}

.com_tbl{ border:none; width: 100%; line-height: 2.4;}
.com_tbl tr{ border-bottom: 2px dotted #c6c6c6; }
.com_tbl th{ width:19%; padding: 2%; text-align: center;vertical-align: text-top;}
.com_tbl td{ width:80%; padding: 2%;}
.com_tbl tr:last-child{
	border-bottom: none;
}
#map_canvas{ width:100%!important;}

.bg_gleeting div:nth-child(2), .company div:nth-child(2), .careers div:nth-child(2){
	width: 50%;
	height: 400px;
	overflow: hidden;
	margin:0;
	padding:0;
	color: #666666;
	filter: brightness(0.9);
}
.bg_gleeting div:nth-child(2){
	background: url("../images/img_gleeting.jpg") no-repeat center center / cover #FFFFFF; 
}
.company div:nth-child(2){
	background: url("../images/bg_com.jpg") no-repeat bottom center / cover #FFFFFF;
}
.careers div:nth-child(2){
	background: url("../images/bg_caree.png") no-repeat center center / cover #FFFFFF;
}

.tab_contents h2 .txt_b_shadow{line-height: 120%!important; left: 0;}
.colms_border{border:1px solid #999999; border-radius: 6px; margin: 1%; padding: 2%;}

/* SUPPORT
---------------------------------------------------------------------------*/
.img_case{background: url("../support/img/bg_sup_title.jpg") no-repeat center center / cover #FFFFFF;
	/*width: 50%;*/
	height: 480px;
	margin:0;
	padding:0;
	color: #666666;
	filter: brightness(0.9);}

.warranty > div:nth-child(2){
	background: url("../support/img/bg_contact2.jpg") no-repeat 40% top / cover #FFFFFF;
	border-radius: 6px;
	height: auto;
}
.exchange > div:nth-child(2){
	background: url("../support/img/bg_rep2.jpg") no-repeat center center / cover #FFFFFF;
	border-radius: 6px;
	height: auto;
}

.contents_menu{ position: relative;}
.contents_menu h2{text-align: center;}

.ocp_01 div > div:nth-child(2){ background: url("../support/img/bg_ocp.jpg") no-repeat center center / cover #FFF; width: auto; height: auto; border-radius: 6px;}


/* SERVICE
---------------------------------------------------------------------------*/

/* ==========================================
   FOOTER
========================================== */

footer{
	background:#111827;
	color:#d1d5db;
	margin-top:100px;
	font-size:.95rem;
	line-height:1.8;
}

footer a{
	color:#d1d5db;
	text-decoration:none;
	transition:.2s;
}

footer a:hover{
	color:#fff;
}

/* ==========================================
   MAIN FOOTER AREA
========================================== */

#footermenu{
	max-width:1200px;
	margin:0 auto;
	padding:60px 20px;
	display:flex;
	flex-wrap:wrap;
	gap:60px;
	justify-content:space-between;
	align-items:flex-start;
}

/* ==========================================
   COMPANY
========================================== */

.footer-company{
	flex:1.5;
	min-width:280px;
	text-align:left;
}
.footer-company img{
	width:200px;
	height:auto;
	margin-bottom:20px;
	border-radius: 6px;
	background: #FFFFFF;
}

.footer-company p{
	margin:-20px 0 15px 0 ;
	color:#9ca3af;
}

.footer-company address{
	font-style:normal;
	color:#9ca3af;
	margin-bottom:25px;
}

.footer-contact{
	display:inline-block;
	padding:12px 24px;
	background:#103A71;
	color:#fff !important;
	border-radius:6px;
	font-weight:600;
}

.footer-contact:hover{
	background:#1d4ed8;
}

/* ==========================================
   LINKS
========================================== */

.footer-links{
	display:flex;
	flex-wrap:wrap;
	gap:60px;
	flex:2;
}

.footer-links ul{
	list-style:none;
	padding:0;
	margin:0;
	min-width:180px;
}

.footer-links .title{
	color:#fff;
	font-size:1rem;
	font-weight:700;
	margin-bottom:15px;
	letter-spacing:.05em;
}

.footer-links li{
	margin-bottom:8px;
}

.footer-links a{
	color:#9ca3af;
}

.footer-links a:hover{
	color:#fff;
}

/* ==========================================
   BOTTOM BAR
========================================== */

.footer-bottom{
	border-top:1px solid rgba(255,255,255,.1);
	padding:20px;
	text-align:center;
	font-size:.85rem;
	color:#9ca3af;
}

.footer-bottom a{
	color:#9ca3af;
	margin:0 10px;
}
/* FOOTER
---------------------------------------------------------------------------
footer {
	clear: both;position: relative;z-index: 1;
	font-size: 80%;
	background: #222;
	color: #ccc;
	text-align: center;
	margin-top:100px;
}
footer a {color: #ccc;}
footer a:hover {color: #fff;}*/

/*FOOTER MENU
---------------------------------------------------------------------------
#footermenu {
	overflow: hidden;
	padding: 50px 0;
	display: flex;
	justify-content: space-around;
	align-content: flex-start;
	width: 100%;
}

#footermenu li a {
	text-decoration: none;
	opacity: 0.7;
}

#footermenu li a:hover {
	opacity: 1;	
}
#footermenu ul {
	width: auto;
	min-width: 200px;
	padding-right: 1%;
	padding-left: 1%;
	text-align: left;
	list-style-type: none;
}
#footermenu li.title, #footermenu li.title a {
	opacity: 1;	
	font-weight: bold;
}
#footermenu li.title::after, #footermenu li.title a::after {
	font-family: "Font Awesome 5 Free";
	content: " \f078";
}
#footermenu img{
	margin: 0;padding: 0;
}

/* CORYRIGHT
---------------------------------------------------------------------------*/
#copyright {*/
	clear: both;
	text-align: center;
	background: #000;	/*背景色*/
	padding: 20px 0;	/*上下、左右へのボックス内の余白*/
}
#copyright a {text-decoration: none;}

/* PAGETOP LINK
---------------------------------------*/
#page-top {
	position: fixed;
	left: 50%;
	bottom: 10px;
	z-index: 999;
	opacity: 0;
	transform: translateX(-50%) translateY(100px);
	transition: all 0.3s ease;
}
#page-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #587A9C;
	background: #FFFFFF;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	color: #587A9C;
	text-transform: uppercase; 
	text-decoration: none;
	transition: all 0.3s;
	font-size:1.8rem;
}
#page-top a::after 	{font-family: "Font Awesome 5 Free";content: '\f077';font-weight: 900;}
#page-top a:hover	{background: #3c5c7a;color: #fff;}
#page-top.UpMove	{animation: UpAnime 0.5s forwards;}
#page-top.DownMove	{animation: DownAnime 0.5s forwards;}

/* SITE POLICY
---------------------------------------*/
.bannerSp{
	display: flex;
	justify-content: center;
	align-items: center;
	color:#FFFFFF;
	background: url("../images/bg_policy.jpg") no-repeat center center / cover #FFFFFF;
}

/*画面幅82,56000px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

	body {
		font-size: 2vw;
	}
	header {border-bottom: 1px solid #ccc;}
	.home header {border: none;}
	
	#contents {padding: 50px 0;}
	#contents h2 {margin-bottom: 50px;}
	
	.inner{padding: 2%;}
	
	.green_storage_q .effect2 div{width:46%!important; margin: 1%; padding: 1%;}
	.green_storage_q .effect2{ display: flex; justify-content: center;align-items: stretch;align-content: flex-start;}

	#footermenu div:last-child{display: none;}
	.big1 {font-size: 20px;}
	.fl_box, .fl_box div, .s_menu_title div, .colms div{width:100%!important; display: block;}
	.s_menu_title div:first-child{order: 2;}
	.s_menu_title div:nth-child(2){order:1; opacity: .8;margin-bottom:60px;}
	.s_menu_title_img{height:200px;}
	.effect2 > *, .fl_box > * {width: auto;}
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	body {
		font-size: 3vw;
	}
	#contents h2 {
		margin-bottom: 30px;
	}
	#contents h3 {
		margin-bottom: 20px;
	}
	section + section {
		margin-top: 100px;
	}

	.fl {float: none;}
	.fr {float: none;}
	.big1 {font-size: 16px;}
}