@import url("grid.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');



img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #666;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

/*ヘッダー 
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
    text-align: left;
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}


.contact-button {
	padding: 1rem;
	border: 2px solid #000;
    
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
    margin-bottom: 16px;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
    border-bottom: 1px dotted #fff;
    padding-bottom: 4px;
    color: #fff;
}
nav a:hover {
    border-radius: 8px;
    background-color: #f7f7f7;    
}
nav a {
    padding: 0.5rem;
}



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

#navi {
    display: block !important;
}
}

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

h1{display: none;}

.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 0px;
    right: 0px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}



.pc{display: none;}



/* スマホ時はMENUボタンを表示 */
#open,#close  {
    display: block;
    width: 50px;
    height:50px;
    border: none;
    position: absolute;
    top: 0px;
    right: 0px;
    background: #ff6161;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}

.kv h2 img{
    text-align: center;
    width: 70%; 
}

}
    
/*メイン画像
-------------------------------------*/
.mainimg {
    width: 100%;
    margin: 48px 0;
    overflow: hidden;
}



#loopslider {
    margin: 0 auto;
    width: 100%;
    height: 280px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

#loopslider ul {
/*  width: 100%;*/
    height: 280px;
    float: left;
    display: inline;
    overflow: hidden;
}
#loopslider ul li {
    width: 360px;
    height: 280px;
    float: left;
    display: inline;
    overflow: hidden;
    text-align: center;
}

#loopslider li p{margin-top: 8px;}


/* =======================================
    ClearFixElements
======================================= */
#loopslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

#loopslider ul {
    display: inline-block;
    overflow: hidden;
}


/*slider画像

.sliders{
  width: 640px;
  list-style: none;
  height: 280px;
  overflow: hidden;
  top: 10px;
  margin: 0 auto;
}

.sliders li{
    padding-left: 8%;
    float: left;
    width: 280px;
    margin: 0 auto;}

.sliders li p{margin-top: 8px;}

-------------------------------------*/


.kv{
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #375BA9, #333399);
    padding-bottom: 60px;
    border-bottom: 12px solid #ff6161;
}

.kv h2 span{
    font-weight: 900;
    padding-top: 48px;
    font-size: 1.8rem; 
    line-height: 1.4; 
    display: block;
    margin-bottom: 24px;}
}


.kv h2 img{
    width: 80%; }
}

.mainimg {
    margin: 32px 0;
}

#loopslider li p{
    font-weight: 600;
letter-spacing: 1px;}

.kv .contact-btn a{
    width: 202px;
    margin: 0 auto;
    padding: 10px 0 12px 29px;
    border: #ff6161 solid 5px;
    border-radius: 12px;
    text-align: center;
    color: #333399;
    background: url("../img/icon-mail.png") no-repeat #fff 16px 16px;
    background-size: 24px;
    font-weight: 800;
}



/*メインコンテンツ
-------------------------------------*/
main {
    margin: 0;
}
section {
	margin-bottom: 0;
	padding: 0;
}
.gray-back {
	background-color: #f4f4f4;
}

.contact-btn a{
    width: 202px;
    margin: 0 auto;
    padding: 10px 0px 12px 29px;
    border: #ff6161 solid 6px;
    border-radius: 16px;
    text-align: center;
    font-weight: 900;
    color: #333399;
    background: url("../img/icon-mail.png") no-repeat #fff 16px 16px;
    background-size: 24px;
}

.contact-btn a:hover{
    color: #fff;
    background: url("../img/icon-mail.png") no-repeat #ff6161 16px 16px;
    background-size: 24px;
}

.package-plan .contact-btn a{
    width: 67%;
    font-size: 18px;
    max-width: 220px;
    background: #fff;
    background-size: 24px;
    padding: 8px 16px;
    border-radius: 32px;
    border: 6px #333399 solid;
    font-weight: 900;
    letter-spacing: 1px;
}

.package-plan .contact-btn a:hover{
    background: #333399;
    color:#fff;
}

/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
}
.catch h2 {
    font-weight: 900;
    padding-bottom: 1rem;
}
.under {
    border-bottom: 0.4rem solid #000;
    padding:0 1rem 1rem 1rem;
}
.center {
	text-align: center;
	margin-bottom: 4rem;
}


/*アケシェアとは
-------------------------------------*/
.about{
    background: url(../img/bg_image_try.svg) center -150px no-repeat #FFE9E9;
    padding: 56px 0;
    background-size: 140% 100%;
    text-align: center;
}

.about h2 {
    font-weight: 900;
    padding: 0 40px;
}

.about .catch p{
    font-size: 2rem;
    letter-spacing: 1px;
    font-weight: 900;
    margin-bottom: 0px;
}

.about ul{
    margin:40px 30px 40px 50px;
    list-style: disc outside; 
}

.about ul li:first-child{
    list-style: none;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 2rem;
}

.about ul li{
    font-size: 15px;
    margin-bottom: 32px ;
}

.about ul img{
    padding: 24px 0 0;
}

.about-image{
    width: 100%;
    height: auto;
    line-height: 0;
    border-bottom: 12px solid #333399;
}


.about-col{
    background: #fff;
    margin: 20px 0 ;
    padding:40px 24px 32px;
    border-radius: 24px;
    position: relative;
    letter-spacing: 0;
    font-size: 16px;
    }

    .about h3{
    color: #333399;
    font-size: 2.6rem;
    padding: 0 32px 14px 56px;
    border-radius: 24px;
    background: url(../img/svg_circle.svg) no-repeat #fff 58px 7px;
    background-size: 24px;
    font-weight: 900;
    }

    .about h3.note{
        background: url(../img/svg_circle.svg) no-repeat #fff 38px 7px;
        background-size: 24px;
        }

    .about .row{
        width: 100%;
        }
    .about-col {
        margin: 16px 24px;
    }

    .about-col p{
        text-align: left;
    }

    .about-col span{
    display: block;
    font-size: 0.9em;
}

/* メリット
-------------------------------------*/
.merit{
    background: #F0F0F0;
    padding: 64px 0 0;
    text-align: center;
}

.merit h2.center{
    font-size: 2.3rem;
    padding: 14px 24px;
    border-radius: 24px;
    background: #fff;
    border: 6px #333399 solid;
    font-weight: 900;
    margin-bottom: 56px;
    display: inline-block;
    margin: 12px 24px 64px 24px;
}

.merit-col{
background: #fff;
margin: 20px 0 40px;
padding:40px 32px 32px;
border-radius: 24px;
position: relative;
letter-spacing: 0;
}


.merit-col h3{
    font-size: 2.0rem;
    font-weight: 900;
    padding:8px 0; 
}

.merit-col img{
    width: 60%;
}

.merit-col p{
    text-align: justify;
}


.merit-catch{
    width: 248px;
    margin:20px auto 56px auto;
    padding:24px 8px 14px; 
    font-weight: 900;
    font-size: 2rem;
    border: 6px solid #333399;
    border-radius: 24px;
}

.merit-catch li{
    text-align: center;
    padding-left: 32px;
    background: url(../img/icon_check.svg) no-repeat  32px 12px;
    background-size: 24px;
}

.merit_circle p {
    font-size: 18px;
    line-height: 1;
    text-align: center;
    font-weight: 100;
    margin-top: -6px;
}
.merit_circle p span {
    display: block;
    font-size: 40px;
    font-weight: 800;}

.merit_circle {
    width: 90px;
    height: 90px;
    position: absolute;
    margin: 0 !important;
    top: -40px;
    left: -10px;
    border-radius: 55px;
    background-color: #ff676a;
    border: 6px solid #292e84;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 6px;
    color: #fff;
    font-family: 'Changa', sans-serif;
    z-index: 1;
}


.ex-box{
    background: #333399;
    padding: 48px 0 72px;
    color: #fff;
}

.ex-box .row{
    position: relative;
}
.treat1{
    position: absolute;
    top: -262px;
    left: 0px;
    width: 170px;
}
.treat2{
    position: absolute;
    bottom: -140px;
    right: 21px;
    width: 160px;
}
.office-image h4{
    color: #fff;
    font-size: 2.0rem;
    padding: 16px 24px 16px 56px;
    border-radius: 24px;
    background: url("../img/svg_circle.svg") no-repeat #333399 20px 18px;
    background-size: 24px;
    border: 6px #ffffff solid;
    font-weight: 900;
    margin-bottom: 56px;
    display: inline-block;
    margin: 32px 24px 64px 24px;
}
.office-image ul.note{
    margin: 0 24px 32px;
}
.office-image ul.note li{
    font-size: 15px;
    padding: 12px;
    margin-left:0px; 
    margin-bottom: 16px;
    text-align: left;
    background: #7382cb27;
    border-radius: 12px;
}
.office-image ul.note li:last-child{
    background: none;
}

.office-image ul.note li span{
    font-size: 14px;
    font-weight: 500;
}

.office-image ul.note li:last-child{
    border-bottom: none;
    padding-top: 16px;
}


/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
    width: 100%;
}

ul.slick-dots {
    text-align: center;
    margin: 16px 190px;
    padding-top: 16px;
    
}


.slider li{
    margin: 0 24px;
    border-radius: 24px;
    height: 300px;
    border: 6px #ffffff solid;
}

.slider-item01 {
    background:url(../img/office-image2.jpg) no-repeat center;
    background-size: auto 100%;
}

.slider-item02 {
    background:url(../img/office-image1.jpg) no-repeat center;
    background-size: auto 100%;
}

.slider-item03 {
    background:url(../img/office-image3.jpg) no-repeat center;
    background-size: auto 100%;
}

.slider-item04 {
    background:url(../img/office-image4.jpg) no-repeat center;
    background-size: auto 100%;
}

.slider .slider-item{ width: 100%;}

.slider-item {
    background-color: #fff;
    background-repeat: no-repeat;
}



/*ドットナビゲーションの設定*/

.slider button{
    padding: 0 12px;
}

.slick-dots {

}
ul.slick-dots {
    text-align: center;
    margin: 0 ;
    width: 100%;
}

.slick-dots li {
    display:inline-block;
	margin: 4px;
    height: 20px;
    margin-right:16px; 
    border: none;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;
    height:8px;
    display:block;
    border-radius:8px;
    border: none;
    background:#6F72B3;
}

.slick-dots .slick-active button{
    background:#ffffff;
}



/*主なレンタル機ご紹介
-------------------------------------*/



.into{
    padding-top: 40px;
    background: #FFE9E9;
    text-align: center;
}

.into .container{
    overflow: hidden;
}

.into h2{
    font-size: 2.4rem;
    padding: 14px 32px;
    border-radius: 24px;
    background: #fff;
    border: 6px #333399 solid;
    font-weight: 900;
    margin-bottom: 56px;
    display: inline-block;
    margin: 32px 24px 64px 24px;
}

.into-col{
    background:url("../img/into-parts.png") 16px 0 no-repeat  #fff;
    background-size: 22%; 
    border-radius: 24px;
    margin-bottom: 56px;
    padding: 1px 24px;
}

.into-col:last-child{
    margin-bottom: 24px;
}

.into-col ul li.note{
    font-size: 10px;
}

.into-col h3{
    font-weight: 900;
    margin: 24px auto;
    padding-left: 24px;
    text-align: center;
}

.into-col:first-child h3, .into-col:last-child h3{padding-left: 4px;}

.into-col ul{
    margin: 24px 0;
    font-size: 1.4rem;
}

.into-col p{
    font-size: 15px;
    text-align: justify;
    margin-bottom: 24px;
}
.into-col img{
    border-radius: 8px;}

.into-col-subtitle{
    padding-top: 32px;
    border-top: 1px dotted #dadaf3;
    font-weight: 700;
}

.gamelist{
    text-align: left;
    height: 260px;
    padding:24px;
    border-radius: 6px;
    background: #ececf9; 
    overflow-y: scroll;

}

.gamelist::-webkit-scrollbar{width:6px;}
.gamelist::-webkit-scrollbar-track{background:#dadaf3;border-radius: 6px;}
.gamelist::-webkit-scrollbar-thumb{background:#333399;border-radius: 6px;}

/*パッケージプラン
-------------------------------------*/
.package-plan{
    margin: 60px 32px 32px;
    color: #fff;
    background: #ff6161;
    border-radius: 24px;
    padding: 24px 0px;
    position: relative;
    border: 6px #fff solid;
    width: 80%;
}
.package-plan h4{
    width: auto;
    text-align: left;
    color: #ff6161;
    line-height: 1.2;
    font-size: 1.7rem;
    padding: 14px 8px 14px 24px;
    border-radius: 56px;
    background: #fff;
    font-weight: 900;
    display: block;
    margin: -60px 0px 16px 0px;
    }

.package-plan h4:after{
    display: none;
}

.package-plan p{
    text-align: left;
    padding: 8px 32px;}

.plan-img{
    width: 60px;
    position: absolute;
    top: -48px;
    right: -10px;
}

/*レンタル料金
-------------------------------------*/
.price{
    padding-top: 8px;
    padding-bottom: 40px;
    text-align: center;
    background: linear-gradient(180deg, #FFE9E9, #FFB3B3);

}

.price h2{
    color: #fff;
    font-size: 2.6rem;
    padding: 14px 32px;
    border-radius: 24px;
    background: #ff6161;
    border: 6px #333399 solid;
    font-weight: 900;
    display: inline-block;
    margin: 12px 24px 48px 24px;
    letter-spacing: 2px;
}

.price .container{
    text-align: left;
}

.price h3{
    letter-spacing: 0.5px;
    font-size: 1.7rem;
}

.price .row{
    text-align: left;
}

.price .row p{
    margin-bottom: 0px;
}

.price .flow .ex {padding-bottom: 32px;}


.readme{
    padding: 32px 0;
    position: relative;}

.readme h2{
    font-weight: 900;
    text-align: center;
    background: url("../img/icon-memo.png") 40px 4px no-repeat ;
    background-size: 43px 38px;
    padding: 8px 0px 8px 40px;
    margin-bottom: 24px;
}



.readme li{
    text-align: left;
    border-top: 2px dotted #7382cb;
    padding:16px 0;
    margin: 0 16px;
}

.readme ul.subnote{
    margin: 16px 0 0 0;
    border-radius: 8px;
    background: #f2f2fb;
    list-style: disc;
    padding-left: 16px;
    padding-bottom: 16px;
}

.readme ul.subnote li{
    border-top: none;
    padding-bottom: 1px;
    }

 .treat_build{
        width: 144px;
        position: absolute;
        top: -49px;
        right: 0px;
}

/*申し込みの流れ
-------------------------------------*/




.flow {
	margin-bottom: 3rem;
    border-radius: 24px;
    background: #fff;
    text-align: center;
    padding: 0 32px;
    
}

.flow h3{
    color: #333399;
    font-size: 2.4rem;
    padding: 12px 24px 14px 56px;
    border-radius: 24px;
    background: url(../img/svg_circle.svg) no-repeat #fff 20px 19px;
    background-size: 24px;
    font-weight: 900;
    display: inline-block;
    margin: 32px 0px 0px 0px;
} 

.flow .ex{
    padding:16px 0;
}
.row .flow{
    margin-right: 0px;
    text-align: left;
}
.row .flow:last-child{
    margin-right: 0px;
}
.row .flow h3{
    font-size: 2.2rem;
    background: url(../img/svg_circle.svg) no-repeat #fff 0px 19px;
    background-size: 24px;
    padding: 12px 0 0 36px ;
    margin: 32px 0 8px;
}


.price .wrap-box{
    padding: 0 0 24px;
}


/*フッター
-------------------------------------*/
footer {
    background: #f4f4f4;
}


/*お問い合わせ
-------------------------------------*/
.contact-box {
	border: 1px solid #ccc;
	text-align: center;
	padding: 2rem 0;
}
.table {
	margin: 4rem 0;
}
.table th {
	width: 250px;
}

/*プロフィール
-------------------------------------*/

.profile{
    background-color: #ff6161;
    padding: 64px 24px;
    color: #fff;
    margin-bottom: 32px;
}
.profile h5{
    font-weight: 800;
    margin-bottom: 16px;
}
.profile-photo{
    margin-top: 24px;
    text-align: center;}

.profile .txt{
    text-align: justify;
    margin:8px 8px 32px;
}

/*メディア掲載情報
-------------------------------------*/
.mediaList {
    width: 98%;
    margin: 10px auto;
}
.mediaList h5{
    text-align: center;
    margin: 0 0 32px;
    font-weight: 900; 
    color: #fff;
    
}

.mediaList ul{
    margin-bottom: 56px;
}

.mediaList ul li{
    font-size: 0.9em;
    line-height: 1.6;
    padding: 8px 2px 10px 40px;
    margin-bottom: 4px;
    border-bottom: 2px #ff9b9b dotted;
    background: url(../img/icon_arrow_white.svg) 8px center no-repeat;
}

.mediaList ul li:first-child{
    padding-top: 12px;
    border-top: 2px #ff9b9b dotted;
}

.mediaList ul li span{
    display: block;
    font-weight: 700;
    font-size: 0.85em;
    color: #333399; }


.mediaList ul li a{color: #fff;}
.mediaList ul li a:hover{color: #333399;}

.policy{text-align: center;}


.policy p{padding: 16px 0;}

.policy span.address{
    display: block;
    font-size: 0.85em;
}

.policy p.catch{
    font-size: 1.4em;
    letter-spacing: 1px;
    font-family: 'Changa', sans-serif;}

.policy strong{
    line-height: 2;
}

.relation{
    text-align: center;
    font-size: 12px;
    color: #666;
}
.relation a{ display: inline; }
.copyright {
    text-align: center;
    padding: 1rem 0;
    color: #666;
}


/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background: #333399;
    border-radius: 8px;
    color: #fff;
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: #666;
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box {
	display: none;
}	
/*お問い合わせ
-------------------------------------*/
.table th {
	width: 100%;
	display: block;
}	
.table td {
	display: block;
}
}




/* PC用の表示------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 768px){


.sp{display: none;}

header{
    width: 100%;
    height: 44px;
    padding-top: 1px;
    background: #ff6161;
    position: fixed;
    z-index: 9999;
}

header .container{position: relative;}

h1{position: absolute;}

.kv h2{
    font-weight: 900;
    padding-top:60px;}

nav{
    font-size:1.3rem;
    font-weight: bold;
    margin: 6px 0 0 120px;
}

nav ul{
    margin:0; 
    width: 90%;
    float: right;
}
nav li a{
    border-bottom: none;
}


.sliders{
  width: 1440px;
  list-style: none;
  height: 280px;
  overflow: hidden;
  top: 10px;
  margin: 0 auto;
}

.sliders li{
    padding-left: 0%;
    margin-left: 64px;
    float: left;}

.about{
    background: url(../img/bg_image_try.svg) -50px -90px no-repeat #FFE9E9;
    padding-top: 60px;
    background-size: cover;
}

.about h2 img{
    width:340px;
}

.about ul{
    width: 700px;
    margin:40px auto 30px; 
}

.about ul li:first-child{
    text-align: center;
    list-style: none;
}

.about ul li{
    font-size: 16px;
    margin-bottom: 24px;
}

.about-image{
    width: 100%;
    height: 240px;
    vertical-align: bottom;
}

.about-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.about .row{
width: 960px;
margin: 0 auto;
}

.about-col{
    background: #fff;
    margin-left: 16px;
    padding:40px 20px 16px;
    border-radius: 24px;
    position: relative;
    letter-spacing: 0;
    font-size: 16px;
    min-width: 264px;
    }

 .about h3{
    color: #333399;
    font-size: 2.6rem;
    padding: 0 32px 14px 56px;
    border-radius: 24px;
    background: url(../img/svg_circle.svg) no-repeat #fff 34px 7px;
    background-size: 24px;
    font-weight: 900;
    }
    .about h3.note{
        background: url(../img/svg_circle.svg) no-repeat #fff 24px 7px;
        background-size: 24px;
        }    

.merit {
    background:#F0F0F0;
    position: relative;
    letter-spacing: 0.11em;
}

.merit-col h3{
    font-size: 2.2rem;
    font-weight: 900;
    padding:8px 0; 
}

.merit .row{
    position: relative;
    width:960px;
    margin:0 auto; 
}

.merit_circle p {
    margin-top: -8px;
}
.merit_circle p span {}

.merit_circle {
    width: 100px;
    height: 100px;
    position: absolute;
    top: -30px;
    left: -30px;
    padding: 26px 6px;
}


.merit-col{
    background: #fff;
    flex: 1;
    max-width: 400px;
    margin:24px;
    padding:40px 48px 32px 48px;
}



.office-image{
    width: 100%;
    margin: 64px auto 0px;
}


.ex-box .row{
    position: relative;
}
.treat1{
    animation: dri1 3s ease-in-out infinite alternate;
    position: absolute;
    top: -80px;
    left: -70px;
    width: 206px;
}
.treat2{
    animation: dri2 3s ease-in-out infinite alternate;
    position: absolute;
    top: 270px;
    left: 320px;
    width: 206px;
}

@keyframes dri1 {
    0% {
      transform:translate(0, 0) rotate(-7deg);
    }
    30% {
      transform:translate(0, -7px) rotate(0deg);
    }
    100% {
      transform:translate(0, 0) rotate(7deg);
    }
  }

  @keyframes dri2 {
    0% {
      transform:translate(0, 0) rotate(-8deg);
    }
    50% {
      transform:translate(0, 7px) rotate(0deg);
    }
    100% {
      transform:translate(0, 0) rotate(9deg);
    }
  }

.office-image ul{
    padding:8px 0 ;
    text-align: left;
}
.office-image img{
    max-width: 470px;
}

.office-image h4{
    font-size: 2.2rem;
    background: url(../img/svg_circle.svg) no-repeat #333399 20px 19px;
    background-size: 24px;
}

.office-image ul.note li{
    padding-left: 16px;}

.office-image ul.note li span{
    font-weight: normal;
    font-size:13px ;}
    
.office-image ul.note {line-height: 1.4;}

.office-image .contact-btn a{
    padding: 12px 0px 14px 29px;
}


/*==================================================
PC スライダー
===================================*/
.slider {
    position:relative;
    width: 500px;
}

ul.slick-dots {
    text-align: center;
    margin: 0 100px;
    width: 300px;
}

ul.slick-dots li{
padding-top: 8px;
}



.into{
    padding-top: 48px;
    padding-bottom: 16px;}

.into .container{
    width: 760px;
    overflow: hidden;
}

.into-col {
    background: url(../img/into-parts.png) 26px 0 no-repeat #fff;
    background-size: 12%;
    padding: 1px 40px;}

.into-col p{
    font-size: 16px;
    padding-bottom: 16px;
}
.into-col img{
    max-width: 400px;
}
.into-col .row{
    padding-bottom: 32px;
}

.into-col ul{
    padding-left: 24px;
    text-align: left;
}


.price .container{
    width: 760px;
}

.price .wrap-box{
    padding: 0 6% 24px;
}

.price h2{
    margin: 12px 24px 64px 24px;
}

.flow strong{
    margin-top: 24px;
    display: inline-block;
}
.flow img{
max-width: 300px;
}

.package-plan {
    margin: 60px auto 32px;
    width: 686px;
}

.package-plan h4{
    width: 270px;
    color: #ff6161;
    line-height: 1.2;
    font-size: 2rem;
    padding: 14px 16px;
    border-radius: 56px;
    background: #fff;
    font-weight: 900;
    display: block;
    margin: -55px 0px 16px 180px;
    text-align: center;
    }


.plan-img{
    width: 60px;
    position: absolute;
    top: -30px;
    right: 20px;
}

.readme {
    width: 860px;
    margin: 0 auto 72px; 
    padding-top: 56px;
    text-align: center;
    position: relative;
}

.treat_build{
    width: 235px;
    position: absolute;
    top: -81px;
    left: -100px;
}

.readme h2{
    color: #333399;
    font-size: 2.6rem;
    padding: 14px 32px;
    border-radius: 24px;
    background: #fff;
    border: 6px #333399 solid;
    font-weight: 900;
    margin-bottom: 56px;
    display: inline-block;
    margin: 12px 24px 64px 24px;
    letter-spacing: 2px;
}

.readme ul.subnote {
    text-align: left;
    padding: 8px 24px;
}
.readme li.center{
    padding-top: 40px;
    text-align: center;
}

.profile .row{
    width: 80%;
    margin:0 auto;
}
.profile .txt{
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 24px 16px;
}
.profile-photo{
    min-width:120px; 
}

.row .flow{
    margin-right: 24px;
    text-align: left;
}


/*メディア掲載情報
-------------------------------------*/
.mediaList {
    width: 80%;
    margin: 10px auto;
}


}