@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #F2B441;
    --link-color: #034C8C;
    --linkhover-color: #F2C438;
    --back-color: #115D8C;
    --block-color: #F0F1F2;
    --white-color: #fff;
    --black-color:#333;
}

/* Color Theme Swatches in Hex */
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-1-hex { color: #034C8C; }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-2-hex { color: #115D8C; }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-3-hex { color: #F0F1F2; }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-4-hex { color: #F2C438; }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-5-hex { color: #F2B441; }
/* Color Theme Swatches in RGBA */
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-1-rgba { color: rgba(2, 76, 140, 1); }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-2-rgba { color: rgba(16, 92, 140, 1); }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-3-rgba { color: rgba(239, 241, 242, 1); }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-4-rgba { color: rgba(242, 195, 55, 1); }
.Flat-lay-design-of-travel-concept-with-plane-on-blue-and-yellow-background-with-copy-space-5-rgba { color: rgba(242, 180, 65, 1); }

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:inline-block;
    color: var(--link-color);
    text-decoration-line: none;
    font-weight: bold;
}
a:hover { 
    color: var(--linkhover-color);
}
a img {
    margin-bottom: 1rem;
    transition:0.1s;
    filter: brightness(100%);
}
a img:hover {
    filter: brightness(80%);
}
p {
    text-indent: 1em;
}
.center {
	text-align: center;
}
.border{
    border-bottom: 1px solid var(--black-color);
    display:block;
}
.bold{
    font-weight: bold;
}
.red{
    color: #ff0000;
    font-weight: bold;
}
.textcolor{
    color: var(--back-color);
    font-weight: bold;
}
.relative{
    position: relative;
}
.blueback {
	background: linear-gradient(to bottom,var(--link-color),var(--back-color));
	color: var(--white-color);
	padding: 0.7rem 0 0.2rem 2.5rem;
    margin: 4.0rem auto 2.0rem auto;
    border-radius: 5.0rem;
}
.underline {
    display: inline-block;
    position:relative;
    width: 100%;
    padding-left: 5.0rem;
    margin: 3.0rem auto 2.0rem auto;
    color: var(--back-color);
    font-weight: bold;
}
.underline::before,
.underline::after{
    content: "□";
    position: absolute;
}
.underline::before{
    left:0;
    top:-3px;
    }
.underline::after{
    left: 0.7rem;
    top: 3px;
    color: var(--linkhover-color);
}
.block{
    font-weight: bold;
    background-color: rgba(239, 241, 242, 1);
    display: block;
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--link-color);
}
.block2{
    font-weight: bold;
    background-color: rgba(255, 255, 255, 1);
    display: block;
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    border-left: 15px solid var(--base-color);
    border-top: 2px solid var(--base-color);
    border-bottom: 2px solid var(--base-color);
    border-right: 2px solid var(--base-color);
}
.shadow{
    display: block;
    max-width: 800px;
    box-shadow: 1px 1px 5px 1px #999;
    padding: 5.0rem 5.0rem;
    margin: 3.0rem auto;
}

/*ヘッダー
-------------------------------------*/
.head {
    background-color: rgba(255, 255, 255, 1);
	display:flex;
    width: 100%;
    flex-direction:row;
    padding: 1rem 0 0 0;
    margin-top: 1rem;
    justify-content:space-between;
    position:fixed;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 777;
}
.head img { 
    width: 160px;
    height: auto;
    z-index: 999;
    padding-top: 1rem;
}
.telbox {
	margin-left: auto;
	padding: 0 2rem 0 0;
    width: 80px;
    height: auto;
    z-index: 888;
}
.menu {
	background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    width: 100%;
    top: 77px;
    left: 0;
    z-index: 444;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content:space-between;
    list-style: none;
	margin-bottom: 0;
    text-decoration: none;
}
nav li {
    flex: 1 0 auto;
	margin-bottom: 0;
    list-style: none;
}
nav li a {
    text-decoration: none;
    text-align: center;
    list-style: none;
}
nav a:hover {
	color: var(--linkhover-color);
}
nav a {
    padding: 1.6rem 0.8rem;
	display: block;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.head {
	flex-direction: row;
    text-align: left;
    margin-bottom: 20px;
}
.telbox {
	margin-right: 50px;
	text-align: center;
}
.head #open,#close  {
    position: fixed;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}

nav li {
	padding-top: 0;
	border-bottom: 1px solid var(--link-color);
	margin-bottom: 0;
    height: 100%;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    border: none;
    position:fixed;
    top: 20px;
    right: 12px;
    z-index: 999;
    cursor: pointer;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    border: none;
    position:fixed;
    top: 20px;
    right: 12px;
    z-index: 999;
    cursor: pointer;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}

/*メイン画像
-------------------------------------*/
.mainimg{
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 380px;
}
.mainimg img{
    width: 1920px;
    height: 680px;
    object-fit: cover;
    object-position: 0px -300px;
    padding: 0;
    margin: 0;
    z-index: 1;
}
.mainimg h2{
    display: inline-block;
    color:  var(--white-color);
    border-bottom: 1px solid var(--white-color);
    font-weight: bold;
    top: 24rem;
    right: 0;
    padding: 0 3.0rem;
    letter-spacing: 0.12rem;
    z-index: 11;
    position: absolute;
    opacity: 0; /* 初めは透明に設定 */
    transform: translateY(100%); /* 下からスライドするために位置を下に設定 */
    animation: fadeInFromBottom 1.5s forwards; /* フェードインアニメーションの設定 */
}
.mainimg h6{
    display: inline-block;
    background-color: var(--white-color);
    border-top: 1px solid var(--black-color);
    border-bottom: 1px solid var(--black-color);
    border-left: 1px solid var(--black-color);
    border-radius: 1.2rem 0 0 1.2rem;
    color: var(--black-color);
    font-weight: bold;
    top: 31rem;
    right: 0;
    padding: 0.2rem 3.0rem 0 3.0rem;
    z-index: 10;
    position: absolute;
    opacity: 0; /* 初めは透明に設定 */
    transform: translateY(100%); /* 下からスライドするために位置を下に設定 */
    animation: fadeInFromBottom 1.5s forwards; /* フェードインアニメーションの設定 */
}
@keyframes fadeInFromBottom {
    to {
      opacity: 1; /* アニメーション終了時に完全に表示 */
      transform: translateY(0); /* アニメーション終了時の位置 */
    }
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin: 0; 
    z-index: 1;
}

/*イラスト
-------------------------------------*/
.il_akiruno{
    display: block;
    margin-bottom: 2.0rem;
}
.il_sagamihara{
    display: block;
    margin-bottom: 2.0rem;
}
.il_01{
    width: 100px;
    height: auto;
    position: relative;
    top: 2.0rem;
    bottom: 1.0rem;
    display: block;
    margin: auto;
    z-index: 333;
}
.il_02{
    width: 180px;
    height: auto;
    position: absolute;
    bottom: 8.0rem;
    right: 0rem;
    padding: 5px 0;
    z-index: 333;
}
.il_03{
    width: 150px;
    height: auto;
    position: relative;
    top: 0;
    left: 30px;
    z-index: 5;
}
.il_04{
    width: 100px;
    height: auto;
    position: relative;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 0;
}
.il_05{
    width: 150px;
    height: auto;
    position: absolute;
    bottom: 1.2rem;
    right: 0;
    z-index: 0;
}
.il_06{
    width: 100px;
    height: auto;
    position: relative;
    right: 0;
    bottom: 0;
    display: block;
    margin: auto;
    z-index: 333;
}
.il_07{
    width: 180px;
    height: auto;
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 5.0rem 0 0 0;
    z-index: 333;
}
.il_08{
    width: 60px;
    height: auto;
    position: relative;
    display: block;
    margin: auto;
    z-index: 222;
}
.company_name{
    width: 600px;
    height: auto;
    position: relative;
    display: block;
    padding: 5rem 0 5rem 0;
    margin: 0 auto;
    z-index: 22;
}

/*新着情報
-------------------------------------*/
.news{
    display: block;
    max-width: 1000px;
    margin: 1.5rem 2.0rem 0 2.0rem;
}

.news h3 {
    display: block;
    font-weight: bold;
	color: var(--link-color);
    border-radius: 1.0rem;
    border: 2px solid var(--link-color);
	padding-top: 0.3rem;
    text-align: center;
    margin: 0 auto;
}
.news li {
    display: block;
    list-style-type: none;
    color: var(--link-color);
	padding-top: 1.5rem;
    padding-left: 3.0rem;
    margin: 0 auto;
}

/*トップページ
-------------------------------------*/
.header{
    width: 100%;
    height: 300px;
    padding: 0 1.5rem;
    margin: 0 auto 2.0rem auto;
    position: relative;
}
.bg01{
    background-image: url(../img/bg01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
}
.bg02{
    background-image: url(../img/bg03.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;
}

/*テーブル
-------------------------------------*/
th {
    background-color: var(--block-color);
}
td{
    background-color: var(--white-color);
}

/*イエロー
-------------------------------------*/
.bgyellow{
    display: block;
    background-color: var(--linkhover-color);
    margin: 0 auto;
    padding: 0;
}

/*グループロゴ
-------------------------------------*/
.group{
    text-align: center;
    font-size: 1.2rem;
    padding: 5rem 0;
    margin: 0;
    color: var(--link-color);
}

/*フッター
-------------------------------------*/
footer {
    background-color: var(--link-color);
    padding: 5rem 0;
	color: var(--block-color);
}
footer h6 {
    border-bottom: 1px solid var(--block-color);
}

footer a {
    display:block;
    color: var(--white-color);
    text-decoration-line: none;
}

footer a:hover {
    color: var(--linkhover-color);
}

/*フッター2
-------------------------------------*/
.footer2 {
    text-align: center;
    padding: 1rem 0 0 0;
    background-color: var(--black-color);
	color: var(--block-color);
    font-size: 1rem;
    font-weight: normal;
}

.footer2 a {
    padding: 1.5rem 0 0 0;
    text-decoration: none;
	display: inline-block;
    color: var(--white-color);
    font-weight: normal;
}
.footer2 a:hover {
    color: var(--linkhover-color);
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0 2rem 0;
    background-color: var(--black-color);
    color: var(--block-color);
    font-size: 1rem;
    font-weight: normal;
}
.copyright a {
    text-decoration: none;
	display: inline-block;
    color: var(--white-color);
}
.copyright a:hover {
    text-decoration: none;
	display: inline-block;
    color: var(--linkhover-color);
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 5px;
    right: 5px;
}
#pagetop a {
    display: block;
    background: var(--link-color);
    color: var(--white-color);
    width: 50px;
    padding: 5px 5px;
    text-align: center;
    border: #fff 1px solid;
    font-size: small;
}
#pagetop a:hover {
    background: var(--linkhover-color);
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: var(--link-color);
}
.breadcrumb li a:hover {
    display: inline-block;
    color: var(--linkhover-color);
}