@charset "utf-8";
/*------------------------------------------------*/
/* 構成
/*------------------------------------------------*/
#container {
    width: 100%;
    padding: 100px 0 50px;
}

.content__inner {
    padding: 0 1.5rem;
}

.content__body {
    margin-top: 3rem;
}

.section__wrap {
    background-color: var(--color-beige);
}

/*------------------------------------------------*/
/* ヘッダー
/*------------------------------------------------*/
#rudder3-header {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/*  PC用メニュー */
.header__inner {
    display: flex;
    position: fixed;
    top: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 4rem);
    margin: 2rem 2rem 0;
    padding:0 1rem;
    background-color: var(--color-white);
    box-shadow: 5px 5px 15px 0px rgba(194,194,194,0.8);
    border-radius: 10px;
    transition: 0.5s;
    z-index: 10;
}

#logo img {
    width: 180px;
    padding: 1rem;
}

#nav {
    display: flex;
    align-items: center;
    padding: .5rem;
}

.menu__list {
    display: flex;
    justify-content: flex-end;
}

.menu__item {
    margin-right: 10px;
    padding: 10px;
}

.menu__btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

.menu__btn li {
    margin-left: 10px;
}

.menu__document a {
    display: block;
    width: 150px;
    padding: 10px 15px;
    background-color: var(--color-orange);
    border-radius: 10px;
    color: var(--color-white);
}

.menu__trial a {
    display: block;
    width: 150px;
    padding: 10px 15px;
    border: 1px solid var(--color-orange);
    border-radius: 10px;
    color: var(--color-orange);
}

/*  タブレット*/
@media screen and (max-width: 1279.9px) {
    #menu_icon {
        display: block;
    }

    .header__inner.hamburger {
        align-items: flex-start;
        height: 80%;
    }

    .menu__list {
        display: block;
        position: absolute;
        order: 3;
        visibility: hidden;
        opacity: 0;
        top: 70px;
        left: 0;
        width: 100%;
        padding-top: 1rem;
        padding-bottom: 2rem;
        text-align: center;
    }

    .menu__list.hamburger {
        visibility: visible;
        opacity: 1;
    }
}

/*  スマホ用メニュー */
@media screen and (max-width: 767.9px) {    
    
    #logo img {
        width: 150px;
    }

    .header__inner {
        width: calc(100% - 2rem);
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .menu__btn {
        display: block;
        visibility: hidden;
        opacity: 0;
    }

    .menu__btn.hamburger {
        visibility: visible;
        opacity: 1;
    }

    
    .menu__document a {        
        position: absolute;
        left: 50%;         
        bottom: 5rem;       
        transform: translateX(-50%);
        margin-bottom: 3rem;
        margin-left: 0px;
        padding: 15px 0;
    }

    .menu__trial a {        
        position: absolute;
        left: 50%;         
        bottom: 0;       
        transform: translateX(-50%);
        margin-bottom: 3rem;
        margin-left: 0px;
        padding: 15px 0;
    }
}


#logo a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

/* 共通　*/
.section__title {
    position: relative;
    width: 100%;
    padding: 2rem 0 .5rem;
    font-size: 200%;
    font-weight: 500;
    color: var(--color-blue-gray);
    text-align: center;
}

.section__title:before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 5px;
    border-radius: 3px;
    background: var(--color-orange);
    content: '';
}

.section__title.white {
    color: var(--color-white);
}

.section__desc-bright {
	display: flex;
	justify-content: center;
	align-items: center;
    padding-top: 4rem;
	font-size: 150%;
	text-align: center;
}

.section__desc-bright::before,
.section__desc-bright::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: var(--color-white);
}

.section__desc-bright::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.section__desc-bright::after {
	margin-left: 30px;
	transform: rotate(35deg)
}
.section__desc-dark {
	display: flex;
	justify-content: center;
	align-items: center;
    padding-top: 4rem;
	font-size: 150%;
	text-align: center;
}

.section__desc-dark::before,
.section__desc-dark::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: var(--color-black);
}

.section__desc-dark::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.section__desc-dark::after {
	margin-left: 30px;
	transform: rotate(35deg)
}

.content__title {
    padding: 2rem 0;
    color: var(--color-orange);
    font-size: 150%;
    font-weight: 180;
    text-align: center;
}

/*------------------------------------------------*/
/* 背景固定暗転
/*------------------------------------------------*/
.mask{
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;   
    transition: .7s;
    overflow: hidden;
    z-index: 5;
}

.mask.active{
    visibility: visible;
    opacity: 0.5;
}

/*------------------------------------------------*/
/* メインビジュアル
/*------------------------------------------------*/
.mv {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.catchcopy {
    max-width: 700px;
    margin: 3rem auto 0;
    padding: 0 2rem;
}

.mv__img__wrap {
    width: 100%;    
    background-image: url("../../images/hotel/rudder3/bg.jpg");
    background-position: 0 65%;
    background-size: contain;
    background-repeat: no-repeat;
}

.mv__img {
    width: 70%;
    margin: 5vh auto;
}

@media screen and (max-width: 1279.9px) {
    .mv {
        background-position: 0 55%;
    }
}

/* スクロールダウン　*/
.scrolldown{
    position: absolute;
    bottom: 100px;
    left: 50px;
}

.scrolldown span{
    position: absolute;
    left: 10px;
    bottom: 45px;
    color: var(--color-blue-gray);
    font-size: 0.7rem;
    letter-spacing: 0.05rem;
    writing-mode: vertical-rl;
}

.scrolldown:before {
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-blue-gray);
    animation:
        circlemove 1.6s ease-in-out infinite,
        cirlemovehide 1.6s ease-out infinite;        
    content: "";
}

@keyframes circlemove{
    0%{bottom:95px;}
    100%{bottom:-5px;}
}

@keyframes cirlemovehide{
    0%{opacity:0}
    50%{opacity:1;}
    80%{opacity:0.9;}
    100%{opacity:0;}
}

.scrolldown:after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2px;
    height: 100px;
    background: var(--color-blue-gray);
    content:"";
}

@media screen and (max-width: 767.9px) {
    
    .scrolldown {
        display: none;
    }
}
/*------------------------------------------------*/
/* RudderⅢとは
/*------------------------------------------------*/
.function {
    position: relative;
    width: 100%;
    background-color: var(--color-blue-gray);
}

.function::before {
    position: absolute;
    top: 80%;
    left: 0;
    width: 100%;
    height: 21%;
    background-color: var(--color-white);
    content: "";
}

.function__text {
    width: 100%;
    max-width: 34rem;
    margin: 4rem auto 2rem;
    font-size: 120%;
}

.function__caption {
    margin: 2rem 0 2rem 10vw;
    color: var(--color-white);
}

@media screen and (max-width: 767.9px) {
    .function__caption {
        margin-left: .5rem;
    }
}

.function__line {
    position: relative;
    width: fit-content;
    padding: 12px 16px 0;
    border-bottom: 2px solid var(--color-white);
}

.function__line::before {
    position: absolute;
    right: -24px;
    bottom: -13px;
    width: 30px;
    height: 2px;
    background-color: var(--color-white);
    transform: rotate(50deg);
    content: "";
}

.function__line::after {
    position: absolute;
    right: -23px;
    bottom: -28px;
    width: 8px;
    height: 8px;
    background-color: var(--color-white);
    border: 1px solid var(--color-orange); 
    border-radius: 50%;
    content: "";
}

.function__text p {
    color: var(--color-white);
}

.function-video {
    max-width: 560px;
    margin: 3rem auto 0;
}

.function__img {
    position: absolute;
    top: -10vh;
    right: -2vw;
    width: 40%;
}

.it-subsidy_wrap {
    max-width: 1280px;
    margin: 0 auto;
}

.it-subsidy {
    margin: 2rem 0rem;
    padding: 2rem 2rem;
    background: var(--color-beige);
    font-weight: 600;
    text-align: center;
}

.it-subsidy a {
    display:block;
    padding-top: .5em;
    color: var(--color-orange);
    text-align: right;
    text-decoration: underline;
}

/*------------------------------------------------*/
/* 活用方法
/*------------------------------------------------*/
.howto__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 3rem;
}

.howto__item {
    display:flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 3rem;
    border-radius: 10px;
    background-color: var(--color-white);
    box-shadow: 0px 0px 10px 5px #d3d3d3;
}

.how {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    margin-bottom: 5rem;
}

.how::after {
    position: absolute;
    bottom: -5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background-image: url(../../images/hotel/rudder3/allow.png);
    background-size: contain;
    background-repeat: no-repeat;
    content: "";

}

.how__img {
    width: 100px;
    margin-right: 20px;
}

.how__text {
    display: inline-block;
    position: relative;
    max-width: 80%;
    margin: 0;
    padding: 1rem 1.5rem;    
    background-color: var(--color-blue-gray);
    border-radius: 20px;
    color: var(--color-white);
}

.how__text::before {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 20px;
    height: 30px;
    border-radius: 0 0 0 15px;
    box-shadow: -3px -15px 0 -7px var(--color-blue-gray) inset;
    content: '';
}

.to {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    padding: 2rem 1rem 3rem;
}

.to__head {
    position: relative;
    width: 100%;
    font-size: 150%;
    padding-left: 24px;
    padding-bottom: 20px;
    text-align: center;
    color: var(--color-blue-gray);
}

.to__head::before {
    position: absolute;
    top: 0;
    left: calc(50% - 85px);
    font-family: "Material Icons";
    font-size: 24px;
    color: var(--color-orange);
    content: "\e79a";

}

.to__text {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    width: 40%;
}

.to__img {
    max-width: 200px;
    margin: 0 auto;
}

.to__video {
    width: 50%;
    margin-right: 20px;
}

.to__link {
    max-width: 42px;
    margin: auto auto 0;
    padding-bottom: 0;
}

.to__link:hover {
    opacity: 0.3;
}

@media only screen and (max-width: 1279.9px) {
    .to__text {
        width: 100%;
    }

    .to__video {
        width: calc(100% - 20px);
    }
}

/*------------------------------------------------*/
/* 機能一覧
/*------------------------------------------------*/
.function__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.function__item {
    width: 340px;
    margin-bottom: 1rem;
    border: 1px solid var(--color-blue-gray);
}

.function__item__head {
    padding: 1rem;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
}

.function__item__img {
    display: flex;
    justify-content: center;
}

.function__item__img img {
   width: 70px;
   padding: .5rem;
}

.function__item__text {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.function__item__text li {
    padding-bottom: 5px;
}

.video__wrap {
    max-width: 560px;
    margin: 0 auto;
    box-shadow: 20px 20px 0 var(--color-blue-gray);
}

/*------------------------------------------------*/
/* マーケティブ
/*------------------------------------------------*/
.marketive {
    padding: 0 20px 3rem 0;
}

/*------------------------------------------------*/
/* Rudder3の変遷
/*------------------------------------------------*/
.transition__inner {
    padding-top: 3rem;
}

.transition-comments {
    margin-bottom: .5rem;
    color: var(--color-orange);
}

.time-year {
	width: 100%;
	padding: .5rem 1.5rem;
	background-color: var(--color-blue-gray);
	color: var(--color-white);
}

.timeline dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
  
.timeline dt {
    position: relative;
    width: 6rem;
    padding: 1rem;
    text-align: right;
}
  
.timeline dt::after {
    position: absolute;
    right: -0.7rem;
    top: 10px;
    font-size: 22px;
    color: var(--color-orange);
    content: '●';
}
  
.timeline dd {
    width: calc(100% - 6rem);
    padding: 1rem 2rem 3rem;
    border-left: 2px solid var(--color-light-gray);
}

@media only screen and (max-width: 767.9px) {

    .timeline dt {
        width: 4rem;
    }

    .timeline dd {
        width: calc(100% - 4rem);
    }

}

/*------------------------------------------------*/
/* お客様の声
/*------------------------------------------------*/
.voice__list {
    padding: 2rem 0;
}

.voice__item {
    display: flex;
    width: 100%;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    border-radius: 10px;
    background-color: var(--color-white);
    box-shadow: 0px 0px 10px 5px #d3d3d3;
}

@media screen and (max-width: 767.9px) {

    .voice__item {
        display: block;
    }

    .voice__img {
        width: 130px;
        margin: 0 auto;
    }
}

.voice__img {
    padding: 0 2rem 0 1rem;
}


.voice__title {
    padding-bottom: 20px;
    font-size: 120%;
    font-weight: 600;
}

.voice__text__wrap {
    padding: 1rem 0;
}

.voice__text {
    padding: 0 1rem;
}

/*------------------------------------------------*/
/* ご利用料金
/*------------------------------------------------*/
.plan__wrap {
    max-width: 830px;
    margin: 3rem auto 0;
}

.plan_list {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.plan_item {
    width: calc((100% - 50px) / 2);
    margin-bottom: 1rem;
    border: solid 1px var(--color-light-gray);
    border-radius: 10px;
}

.plan_item h3 {
    font-size: 150%;
    color: var(--color-white);
    padding: 2rem;
    text-align: center;
    font-weight: 600;
}

.plan_item.std h3 {
    background-color: var(--color-orange);
}

.plan_item.stt h3 {
    background-color: var(--color-blue-gray);
}

.plan_cost_wrap {
    margin: 2rem 0;
    text-align: center;
}

.plan_cost {
    padding-top: .5rem;
}

.plan_cost span {
    font-size: 150%;
    font-weight: 600;
}

.plan_count {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 2rem;
    margin: 0 1rem;
    padding: 2rem 1rem;
    border-top: 1px solid var(--color-light-gray);
}

.plan_count div {
    font-weight: 600;
}

.plan_function {
    margin: 1rem;
    padding: 2rem 1rem;
    border-top: 1px solid var(--color-light-gray);
}

.plan_function_list {
    padding-top: 1rem;
}

.plan_function_list li {
    display: inline-flex;
    align-items: center;
    width: 100%;
    font-size: 90%;
}

.plan_function_list li .name {
    padding-left: 2px;
}

.material-icons.red {
    color: #ff3300;
}

.material-icons.gray {
    color: var(--color-light-gray);
}

.cost-notes {
    margin-top: 1rem;
}

.notes__box {
    position: relative;
    margin: 3rem 0;
    padding: 1rem 2rem;
    border: solid 1px var(--color-blue-gray);
    border-radius: 10px;
    text-align: center;
}

.notes__box p {
    display: inline-block;
    text-align: left;
}

.notes__box::after {
    position: absolute;    
    top: -1.5rem;
    left: 1.5rem;
    font-weight: bold;
    padding: 0 0.5rem;
    background-color: var(--color-white);
    color: var(--color-orange);
    font-family: 'Material Icons';
    font-size: 36px;
    content: '\e88e';
}

@media screen and (max-width: 767.9px) {

    .plan_list {
        display: block;
    }

    .plan_item {
        width: 100%;
    }
}

/*------------------------------------------------*/
/* 問い合わせボタンリスト
/*------------------------------------------------*/
.btn__list {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    text-align: center;
}

.btn__list li {
    margin-left: 3rem;
}

.btn__document a {
    display: block;
    width: 270px;
    padding: 20px 0;
    background-color: var(--color-orange);
    border-radius: 10px;
    color: var(--color-white);
    white-space: nowrap;
}

.btn__trial a {
    display: block;
    width: 270px;
    padding: 20px 0;
    border: 1px solid var(--color-orange);
    border-radius: 10px;
    color: var(--color-orange);
    white-space: nowrap;
}

@media screen and (max-width: 1279.9px) {
    .btn__list {
        justify-content: center;
        width: 100%;
        margin-top: 5rem;
    }
}

@media screen and (max-width: 767.9px) {
    .btn__list {
        flex-direction: column;
        justify-content: center;
    }

    .btn__list li {
        width: 270px;
        margin: 1rem auto;
    }

    .btn__document {
        margin-bottom: 5rem;
    }
}