/* ------------------------------------------
                  LAYOUTS
------------------------------------------ */

/*TOP(ロゴ資料)*/

.lp_2024.lp_2024_win .keyvisual{
    margin-top: 0;
}

.header-top{
	display: flex;
    justify-content: space-between;
    padding: 0 130px 0 40px;
}

.header-top a{
    display: block;
    padding: 15px 0;
    height: 90px;
}

.Pamphlet-inq{
	width: 310px;
    background: #00A5FF;
    color: #fff;
    height: 90px;
}

.Pamphlet-inq a{
    color: #fff;
    padding: 30px 60px;
	position:relative;
}

.Pamphlet-inq a:after{
    content: '';
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/dl_w.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 36px;
    right: 60px;
}

/*TOPここまで*/

.ss1-section{
	background: linear-gradient(192deg,#A5D5FF,#84F9FF);
	text-align: center;
    padding: 150px 20px;
}

.point-block-area{
	display: flex;
    justify-content: space-between;
}

.point-block-area .point-block{
    border-radius: 10px;
    border: 5px solid #006FCF;
    background: #006FCF;
    width: calc(95% / 3);
    max-width: 230px;
    min-height: 137px;
    height: auto;
    box-shadow: 3px 3px #0F487A;
}

.point-block .white-back{
    background: #FFF;
    color: #016FCF;
    border-radius: 5px 5px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    min-height: 37px;
   height: auto;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.point-block .blue-back{
    background: #016FCF;
    color: #FFF;
    text-align: center;
    border-radius: 0 0 0px 0px;
    min-height: 90px;
    height: auto;
    font-size: clamp(0.875rem, -0.5rem + 2vw, 1.125rem);
    line-height: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.h2-title-wide {
    display: flex;
    align-items: center;
    height: auto;
}

.h2-title-wide h2{
    padding: 0.5em;
    line-height: 1.35;
    width: 100%;
}

.box-feature-ss1{
max-width: 1300px;
    background: #fff;
    margin: 100px auto;
    border-radius: 15px;
    position: relative;
    padding: 72px 85px;
    text-align: left;
}

.box-feature-ss1::before{
    content: '';
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/inu_p01.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 250px;
    height: 250px;
    top: -25px;
    left: -60px;
}

.box-feature-ss1::after{
	content: '';
	width: 100%;
	background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024/img/bk_pataan.webp);
	border-radius: 15px;
	position: absolute;
	right: -15px;
	bottom: -15px;
	top: 15px;
	z-index: -1;
}

.box-feature-ss1.feature2::before{
    content: '';
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/inu_p02.webp);
    top: -25px;
    right: -60px;
	left: auto;
}

.box-feature-ss1.feature3::before{
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/inu_p03.webp);
}

.box-feature-ss1.feature4::before{
    content: '';
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/inu_p04.webp);
    top: -25px;
    right: -60px;
	left: auto;
}

.box-feature-ss1.feature5::before{
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/inu_p05.webp);
}

.box-feature-ss1.feature5
{
	margin: 0 auto;
}

.feature-sub-title{
    border-bottom: 3px solid #00A5FF;
}

.feature-sub-title h3{
    font-size: 28px;
    color: #00A5FF;
    font-weight: bold;
    text-align: left;
    line-height: 1.85em;
}

.sub-title-under{
    margin-top: 14px;
}

.sub-title-under.text-smaller{
	font-size: 12px;
}

.title-icon-right-text{
	margin-left: 139.5px;
}

.title-icon-left-text{
	margin-right: 139.5px;
}

.image-area-blue-back{
    text-align: center;
    background: #F2F8FD;
    padding: 50px;
    border-radius: 30px;
    margin-top: 27px;
}

.sub-contents-bottom{
    margin-bottom: 50px;
}


/*オンプレクラウドロゴ*/
.logo_img{
    height: 50%;
    display: flex;
}

.caption_rogo{
	align-items: stretch;
}

/*SCエリア*/
.ss1cloud-section{
	background: linear-gradient(215deg,#FFEAF5,#B2E4FF);
	text-align: center;
    padding: 150px 20px;
}

.ss1cloud-section .box-feature-ss1{
	margin: 100px auto 0;
}

.ss1cloud-section .box-feature-ss1::after{
	background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/bk_pataan_g.webp);
}

.ss1cloud-section .h2-title {
	background: #0C2468;
}

.ss1cloud-section .feature-sub-title {
    border-bottom: 3px solid #0C2468;
}

.ss1cloud-section .feature-sub-title h3{
	color: #0C2468;
}

.ss1cloud-section .box-feature-ss1::before{
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/inu_p06.webp);
    left: -25px;
    width: 215px;
    height: 215px;
}

.image-area-gray-back{
    text-align: center;
    background: #F2F3F7;
    padding: 50px;
    border-radius: 30px;
    margin-top: 27px;
}

/*選ばれる理由*/
.background-grad-blue{
    background: #E9F7FF;
    text-align: center;
    padding: 150px 20px;
}

.box-feature-ss1.support-area{
	margin: 100px auto 0;
}

.box-feature-ss1.support-area::before{
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/inu_p07.webp);
    left: -25px;
    width: 215px;
    height: 215px;
}

.support-area .image-area-blue-back{
    padding: 40px 100px;
}

/*事例*/
.caption_case{
    align-items: stretch;
}

/*MENU*/
.global-nav{
    position: fixed;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgb(213, 240, 255, 0.9);
    display:none;
  	animation-name: fadeOut;
  	animation-fill-mode:forwards;
  	animation-duration:0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
.global-nav.panelactive{
    display: flex;
    height: 100%;
    opacity: 1;
    z-index: 999;
    animation-name: fadeIn;
    animation-fill-mode: forwards;
    animation-duration: 0.3s;
    align-items: center;
    justify-content: center;
}

/*フェード*/
@keyframes fadeIn{
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

@keyframes fadeOut{
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
}

/*MENUボタン*/
.menu-button{
	position: fixed;
    z-index: 9999;
    right: 0;
    cursor: pointer;
    width: 130px;
    height: 130px;
    border-radius: 0 0 0 30px;
    background: #016FCF;
    color: #fff;
    text-align: center;
}

.menu-button span{
	display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 25%;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    width: 50%;
}

.menu-button span:nth-of-type(1) {
  top:40px; 
}

.menu-button span:nth-of-type(2) {
  top:50px;
}

.menu-button span:nth-of-type(3) {
  top:60px;
}

/*ボタンクリック動作*/
.menu-button.active span:nth-of-type(1) {
    top: 46px;
    left: 46px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.menu-button.active span:nth-of-type(2) {
  opacity: 0;/*真ん中の線は透過*/
}

.menu-button.active span:nth-of-type(3){
    top: 58px;
    left: 46px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
/*ボタンクリック動作ここまで*/

.menu-button p{
	margin-top: 75px;
}

.global-nav-list {
    max-width: 1300px;
    margin: 10% auto;
    font-size: 16px;
    width: 70%;
}

.global-nav-list li{
	padding: 5px 5px 5px 40px;
	position:relative;
}

.global-nav-list li.headline{
	padding: 5px 5px 5px 30px;
}

.global-nav-list .headline-box{
	padding-bottom:5px;
	border-bottom: 1px solid #fff;
}

.global-nav-list .headline-box + li{
    margin-top: 5px;
}

.global-nav-ss1{
    background:#016FCF;
	padding: 25px;
}

.global-nav-ss1 li:hover{
    background:#76b4e8;
}

.global-nav-ss1Cloud{
    background:#0C2468;
	padding: 25px;
	margin: 2px 0 0 0;
}

.global-nav-ss1Cloud li:hover{
    background:#5271bf;
}

.global-nav-other ul{
    display: flex;
    margin: 2px 0 0 0;
    gap: 2px;
}

.global-nav-other ul li{
    width: calc(100% / 3);
    padding: 0;
    font-size: 22px;
    font-weight: bold;
}

.global-nav-other ul li a{
    padding: 25px 25px 25px 55px;
    height: 100%;
}

.global-nav-other ul li:nth-child(1){
    background:#42B8FF;
}

.global-nav-other ul li:nth-child(1):hover{
    background:#91d6ff;
}

.global-nav-other ul li:nth-child(2){
    background:#FF9F31;
}

.global-nav-other ul li:nth-child(2):hover{
    background:#ffc584;
}

.global-nav-other ul li:nth-child(3){
    background:#FFE600;
}

.global-nav-other ul li:nth-child(3):hover{
    background:#fff496;
}

.global-nav-other ul li:nth-child(3):hover a,
.global-nav-other ul li:nth-child(3):hover:before,
.global-nav-other ul li:nth-child(3):hover:after
{
    opacity:0.5;
}

.global-nav-list a{
	color:#fff;
	display:block;
}

.global-nav-other ul li:nth-child(3) a{
	color:#006FCF;
}

.headline a{
	font-weight: bold;
    font-size: 22px;
}

.global-nav-list li:before{
	content: '';
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/link.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 10px;
    height: 6px;
    top: calc(1em - 1px);
    left: 16px;
}

.global-nav-list li.headline:before,
.global-nav-other li:before{
    width: 16px;
    height: 9px;
    top: calc(1em - 2px);
    left: 0px;
}

.global-nav-other li:before{
    top: calc(1em - 2px + 15px);
    left: 25px;
}

.global-nav-other ul li:nth-child(3):before{
	background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024_win/img/link_b.webp);
    width: 16px;
    height: 9px;
    transform: rotate(-90deg);
}

.global-nav-other ul li:nth-child(3):after{
	content: '';
    background-image: url(https://www.dos-osaka.co.jp/ss1/lp/ss1am_2024/img/dl_btn.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 30px;
    right: 15px;
}
/* ------------------------------------------
                for レスポンシブ
------------------------------------------ */
@media (max-width: 1500px) {

.box-feature-ss1::before{
    width: 240px;
    height: 240px;
    top: -35px;
    left: -20px;
}

.box-feature-ss1.feature2::before,
.box-feature-ss1.feature4::before{
    top: -35px;
    right: -20px;
}

.ss1cloud-section .box-feature-ss1::before,
.box-feature-ss1.support-area::before{
	left: -15px;
}

}

@media (max-width: 1266px) {

.point-block .white-back{
	min-height: 54px;
}

}

@media (max-width: 1000px) {

.lp_2024.lp_2024_win .keyvisual {
    padding-top: 0;
}

.menu-button{
    width: 110px;
    height: 110px;
    border-radius: 0 0 0 25px;
}

.header-top{
    padding: 0 110px 0 40px;
}

.menu-button p{
    margin-top: 60px;
}

.menu-button span:nth-of-type(1){
	top: 35px;
}

.menu-button span:nth-of-type(2){
    top: 45px;
}

.menu-button span:nth-of-type(3){
    top: 55px;
}

.menu-button.active span:nth-of-type(1){
	top: 37px;
    left: 40px;
}

.menu-button.active span:nth-of-type(3){
	top: 49px;
    left: 40px;
}

#lp.lp_2024_win .keyvisual-image-wide{
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 22.4%, rgba(66, 184, 255, 1) 22.4%, rgba(66, 184, 255, 1) 100%);
}



}


@media(max-width:800px){

.global-nav-list{
font-size: 12px;
    width: 90%;
    line-height: 1.2;
}

.global-nav-other ul{
    display: block;
}

.global-nav-list li.headline:before
{
	top:1em;
}

.headline a{
	font-size: 18px;
}

.global-nav-other ul li{
    width: 100%;
	font-size: 18px;
	padding:0;
        margin-top: 2px;
}

.global-nav-other ul li a{
padding: 15px 15px 15px 45px;
}

.global-nav-other li:before{
    top: 1.2em;
    left: 15px;
}

.global-nav-other ul li:nth-child(3):after{
	top: 1em;
}

.global-nav-ss1,
.global-nav-ss1Cloud{
	padding: 15px;
}


.header-top{
	margin-bottom: 20px;
	padding: 0 110px 0 0px;
}

.header-top a{
	padding:0;
    height: 80px;
	display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo{
    width: 50%;
    max-width: 230px;
    padding: 0 10px;
}

.header-logo a{
	padding: 10px;
    max-width: 220px;
}

.Pamphlet-inq{
	max-width: 280px;
	height: 80px;
	width: 90%;
}

.lp_2024.lp_2024_win .keyvisual{
    padding-top: 0;
}

.box-feature-ss1::before{
	display:none;
}

.title-icon-left-text,
.title-icon-right-text
{
	margin: 14px 0 0 0;
}

.Pamphlet-inq a:after{
	display:none;
}

/*MV*/
.point-block-area{
    display: block;
}

.point-block-area .point-block{
        max-width: none;
        width: 90%;
        min-height: 65px;
        margin: 15px auto;
        height: auto;
}

.point-block .white-back,
.point-block .blue-back{
        height: auto;
        min-height: 25px;
        padding: 0;
}

.point-block .blue-back{
    padding: 5px 5px 0 5px;
}

#lp.lp_2024_win .keyvisual-image-wide{
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 18.4%, rgba(66, 184, 255, 1) 18.4%, rgba(66, 184, 255, 1) 100%);
}

/*Contents*/
.h2-title-wide h2{
	font-size: clamp(1.375rem, 0.542rem + 2.667vw, 1.875rem);
}

.box-feature-ss1{
    padding: 50px 40px;
}

}

/* ------------------------------------------
                for sp
------------------------------------------ */

@media(max-width:500px){

/*ヘッダー、グロナビ*/
.menu-button{
	width: 60px;
    height: 60px;
    border-radius: 0 0 0 20px;
}

.menu-button span{
	height: 1px;
}

.menu-button span:nth-of-type(1){
	top: 15px;
}

.menu-button span:nth-of-type(2){
    top: 20px;
}

.menu-button span:nth-of-type(3){
	top: 25px;
}

.menu-button.active span:nth-of-type(1){
    top: 14px;
    left: 21px;
}

.menu-button.active span:nth-of-type(3){
    top: 26px;
    left: 21px;
}

.menu-button p{
    margin-top: 30px;
    font-size: 10px;
}


.header-top{
        padding: 0 57px 0 0;
        margin-bottom: 0;
}

.header-top + div{
    width: 40%;
}

.header-top img{
    width: 130px;
}

.Pamphlet-inq{
    width: 60%;
}

.Pamphlet-inq,
.header-top a{
	height: 50px;
}

.Pamphlet-inq a{
    padding: 0;
}

.Pamphlet-inq a:after{
	display:none;
}

#lp.lp_2024_win .keyvisual-image-wide{
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 12.4%, rgba(66, 184, 255, 1) 12.4%, rgba(66, 184, 255, 1) 100%);
	padding: 30px 0;
}


/*特長*/
.ss1-section,
.ss1cloud-section,
.background-grad-blue
{
	padding: 50px 0;
}

.box-feature-ss1
{
	margin: 50px auto;
	padding: 45px 15px;
}

.ss1cloud-section .box-feature-ss1,
.box-feature-ss1.support-area{
	margin: 50px auto 0;
}

.support-area .image-area-blue-back,
.image-area-blue-back,
.image-area-gray-back
{
    padding: 30px 10px;
}

.box-feature-ss1::after{
    right: -10px;
    bottom: -10px;
}

.h2-title-wide h2{
	font-size: 18px;
	padding: 15px;
}

.feature-sub-title h3{
	font-size: 20px;
	line-height: 1.5em;
	padding-bottom: 0.5em;
}

}