@charset "UTF-8";
@import url("reset.css");
/* 全体 */
html {
    overflow-y: auto;
}
body {
    min-width: 980px;
    overflow: hidden;
}
/* 基本 */
.center {
    text-align: center;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.clear {
    clear: both;
}
.stext {
    font-size: 80%;
}
.ltext {
    font-size: 120%;
}
.lltext {
    font-size: 130%;
}
.valign-m {
    vertical-align: middle;
}
.ue5 {
    margin-top: 5px;
}
.ue10 {
    margin-top: 10px;
}
.ue15 {
    margin-top: 15px;
}
.ue20 {
    margin-top: 20px;
}
.ue30 {
    margin-top: 30px;
}
.ue40 {
    margin-top: 40px;
}
.ue50 {
    margin-top: 50px;
}
.ue100 {
    margin-top: 100px;
}
.shita5 {
    margin-bottom: 5px;
}
.shita10 {
    margin-bottom: 10px;
}
.shita15 {
    margin-bottom: 15px;
}
.shita20 {
    margin-bottom: 20px;
}
.shita30 {
    margin-bottom: 30px;
}
.shita40 {
    margin-bottom: 40px;
}
.shita50 {
    margin-bottom: 50px;
}
.line-h100 {
    line-height: 100%;
}
.line-h180 {
    line-height: 180%;
}
.bold {
    font-weight: bold;
}
.normal {
    font-weight: normal;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.border-b {
    border-bottom: dotted 1px #666666;
}
.border1 {
    border: solid 1px #cccccc;
}
.imeoff {
    ime-mode: inactive;
}
.imeoff___ {
    ime-mode: disabled;
}
.imeon {
    ime-mode: active;
}
.none {
    display: none;
}
.alpha a img,
.alpha input {
    opacity: 1;
    filter: alpha(opacity=100);
}
.alpha a:hover img,
.alpha input:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.red {
    color: #dd0000;
}
.pink {
    color: #f65b7f;
}
/*　flex box */
/*　ブロック要素　*/
.flex-block {
    display: -webkit-flex; /* Safari */
    display: flex;
}
/*　インラインブロック要素　*/
.flex-inline {
    display: -webkit-inline-flex; /* Safari */
    display: inline-flex;
}
/*　折り返す　*/
.flex-wrap {
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
}
/*　等間隔で隙間を空ける　*/
.flex-between {
    -webkit-justify-content: space-between; /* Safari */
    justify-content: space-between;
}
/* ヘッダー */
#header {
    background-color: #2bcff6;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
    position: relative;
}
#header h1 {
    width: 980px;
    margin: 0 auto;
    color: #fff;
    font-size: 1.4rem;
    padding: 20px 0 24px;
}
#header h1 img {
    margin-top: 4px;
}
#header .btn-contact {
    width: 980px;
    text-align: right;
    margin: 0 auto;
    position: relative;
}
#header .btn-contact a {
    width: 210px;
    border: solid 5px #fff;
    border-radius: 3px;
    display: block;
    top: -80px;
    position: absolute;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    background: url(../images/arrow_white.png) no-repeat 14px center #21bbe0;
    padding: 10px 0;
    line-height: 1;
}
#header .btn-contact a:hover,
#header .btn-contact a:active {
    background-color: #2bcff6;
}
/* メイン画像 */
#main-image {
    background: url(../images/main_image_bg.png) repeat-x left top;
}
#main-image p {
    width: 980px;
    margin: 0 auto;
}
#main-image p img {
    margin-left: -119px;
}
/* コンテンツ */
#contents {
    width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
}
#feature {
    padding: 50px 500% 70px;
    margin: 0 -500%;
    background: url(../images/feature_bg.png);
    box-sizing: border-box;
}
#feature h1 {
    text-align: center;
    color: #20c0e6;
    font-size: 4.4rem;
}
#feature p {
    color: #20c0e6;
    font-size: 2rem;
    text-align: center;
}
#feature p:before {
    width: 43px;
    height: 2px;
    content: "";
    background-color: #20c0e6;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}
#feature p:after {
    width: 43px;
    height: 2px;
    content: "";
    background-color: #20c0e6;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}
#feature ul {
    width: 980px;
    margin: 0 auto;
    margin-top: 45px;
    position: relative;
}
#feature ul:before {
    content: url(../images/runner_silhouette.png);
    right: 0;
    top: -55px;
    position: absolute;
    z-index: 5;
}
#feature ul li {
    margin-bottom: 16px;
    padding: 14px 350px 14px 110px;
    background-color: #fff;
    font-size: 2.4rem;
    position: relative;
}
#feature ul li:before {
    content: url(../images/feature_arrow.png);
    position: absolute;
    left: 0;
    top: -7px;
}
#feature ul li:after {
    color: #fff;
    font-size: 3rem;
    width: 52px;
    text-align: center;
    position: absolute;
    left: 40px;
    top: 0;
}
#feature ul li:nth-child(1):after {
    content: "1";
}
#feature ul li:nth-child(2):after {
    content: "2";
}
#feature ul li:nth-child(3):after {
    content: "3";
}
#feature ul li:nth-child(4):after {
    content: "4";
}
#feature ul li:nth-child(5):after {
    content: "5";
}
#design {
    background: url(../images/design_bg.png) repeat-x center top #42a9e8;
    /* padding: 50px 500%;
    margin: 0 -500%; */
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 28px;
}
#design ul {
    width: 980px;
    margin: 0 auto;
}
#design .inner {
    border: solid 20px #72c0f0;
    padding-top: 30px;
}
#design .inner h1 {
    font-size: 4.4rem;
    text-align: center;
    color: #fff;
}
#design .inner h2 {
    font-size: 3rem;
    text-align: center;
    color: #fff;
    margin-bottom: 15px;
    margin-top: 15px;
}
#design .inner p {
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: 15px;
}
#design .inner ul {
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 37px;
    font-size: 0;
}
#design .inner ul li {
    font-size: 1.4rem;
    display: inline-block;
}
#design .inner ul li:first-child,
#design .inner ul li:nth-child(4),
#design .inner ul li:nth-child(7),
#design .inner ul li:nth-child(10) {
    margin-left: 0;
}
#howto {
    padding-bottom: 80px;
    width: 980px;
    margin: 0 auto;
}
#howto > h1 {
    padding: 10px 500%;
    margin: 0 -500%;
    font-size: 3.6rem;
    color: #fff;
    text-align: center;
    background-color: #353535;
    margin-bottom: 57px;
}
#howto .shape {
    float: left;
    margin-bottom: 60px;
}
#howto .photo {
    float: right;
}
#howto .photo li {
    float: left;
    margin-left: 25px;
}
#howto .attach {
    clear: both;
}
#howto .attach h1 {
    background-color: #353535;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 35px;
    margin-bottom: 40px;
}
#howto .attach .step {
    font-size: 0;
    margin: 0 28px;
}
#howto .attach .step li {
    display: inline-block;
    vertical-align: top;
    width: 226px;
    color: #fff;
    font-size: 1.4rem;
    margin-right: 31px;
    background: url(../images/step_bg_top.png) no-repeat left top,
        url(../images/step_bg_bottom.png) no-repeat left bottom,
        url(../images/step_bg.png) repeat-y left top;
    padding: 30px;
    min-height: 203px;
    margin-bottom: 30px;
}
#howto .attach .step li:last-child {
    margin-right: 0;
}
#howto .attach .step li .number {
    display: block;
    text-align: right;
    margin-bottom: 36px;
}
#howto .attach .notes {
    background-color: #f6f6f6;
    margin: 0 28px;
    padding: 30px;
}
#howto .attach .notes dt {
    background: url(../images/icon_note.png) no-repeat left top;
    font-size: 1.6rem;
    color: #00499c;
    padding: 5px 0 0 35px;
    font-weight: bold;
    float: left;
    width: 172px;
}
#howto .attach .notes dd {
    margin: 0 0 20px 207px;
    padding-top: 5px;
}
#howto .attach .notes dd:last-child {
    margin-bottom: 0;
}
#results {
    background: url(../images/result_bg.png) no-repeat center top #202020;
    padding: 60px 500% 70px;
    margin: 0 -500%;
}
#results h1 {
    font-size: 4rem;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
}
#results p {
    color: #fff;
    text-align: center;
    font-size: 2rem;
}
#results p:before {
    width: 43px;
    height: 2px;
    content: "";
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}
#results p:after {
    width: 43px;
    height: 2px;
    content: "";
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}
#results table {
    width: 100%;
    background-color: #fff;
}
#results table th {
    background-color: #dadada;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 20px 40px;
    text-align: left;
}
#results table td {
    padding: 15px 40px;
    vertical-align: top;
}
#results table td:first-child,
#results table td:last-child {
    font-weight: bold;
}
#results table td .number {
    color: #f4780a;
}
#results table tr:nth-child(odd) td {
    background-color: #f6f6f6;
}
#faq {
    background: url(../images/faq_top.png) no-repeat center top,
        url(../images/faq_bg.png);
    padding: 70px 500% 50px;
    margin: 0 -500%;
}
#faq h1 {
    font-size: 4rem;
    color: #fff;
    text-align: center;
    margin-bottom: 55px;
}
#faq dl {
    width: 980px;
    margin: 0 auto;
}
#faq dl dt {
    color: #fff;
    font-weight: bold;
    margin-bottom: 30px;
    text-decoration: underline;
    position: relative;
    padding: 10px 0 0 60px;
    cursor: pointer;
}
#faq dl dt:hover,
#faq dl dt:active {
    text-decoration: none;
}
#faq dl dt:before {
    content: "Q";
    width: 39px;
    height: 39px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    color: #0c52a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
    line-height: 39px;
    vertical-align: middle;
    font-weight: normal;
    position: absolute;
    left: 0;
    top: 0;
}
#faq dl dt:after {
    content: "";
    border-left: solid 7px #fff;
    border-top: solid 4px transparent;
    border-bottom: solid 4px transparent;
    display: block;
    position: absolute;
    left: 38px;
    top: 16px;
}
#faq dl dd {
    color: #fff;
    margin-bottom: 30px;
    padding: 10px 0 25px 60px;
    position: relative;
    border-bottom: dashed 1px #0c52a8;
    display: none;
}
#faq dl dd:before {
    content: "A";
    width: 39px;
    height: 39px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    color: #0c52a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
    line-height: 39px;
    vertical-align: middle;
    font-weight: normal;
    position: absolute;
    left: 0;
    top: 0;
}
#faq dl dd:after {
    content: "";
    border-left: solid 7px #fff;
    border-top: solid 4px transparent;
    border-bottom: solid 4px transparent;
    display: block;
    position: absolute;
    left: 38px;
    top: 16px;
}
#contact {
    width: 980px;
    margin: 0 auto;
    padding: 65px 0 80px;
}
#contact h1 {
    font-size: 4.4rem;
    color: #20c0e6;
    text-align: center;
    margin-bottom: 30px;
}
#contact p {
    text-align: center;
}
#contact table {
    width: 100%;
    margin: 40px 0 50px;
    border-left: solid 4px #dcdcdc;
    background-color: #f6f6f6;
}
#contact table th {
    padding: 20px;
    font-weight: bold;
    vertical-align: top;
    text-align: left;
    width: 226px;
}
#contact table th .must {
    background-color: #f17405;
    color: #fff;
    padding: 2px 10px;
    border-radius: 5px;
    float: right;
}
#contact table td {
    padding: 15px 20px 15px 0;
}
#contact table td input[type="text"] {
    width: 100%;
    height: 35px;
    border-radius: 3px;
    border: solid 1px #dcdcdc;
    box-sizing: border-box;
}
#contact table td textarea {
    width: 100%;
    height: 280px;
    border-radius: 3px;
    border: solid 1px #dcdcdc;
    box-sizing: border-box;
}
#contact table tr:nth-child(even) th,
#contact table tr:nth-child(even) td {
    background-color: #eeeeee;
}
#contact .btn input {
    border: solid 5px #20c0e6;
    border-radius: 3px;
    background: url(../images/arrow_water.png) no-repeat 14px center #fff;
    color: #20c0e6;
    font-weight: bold;
    font-size: 2rem;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
        Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    padding: 5px 0;
    width: 210px;
    cursor: pointer;
}
#contact .btn input:hover,
#contact .btn input:active {
    background-color: #edfafd;
}
#company {
    padding: 70px 500% 80px;
    margin: 0 -500%;
    background: url(../images/company_bg.png);
}
#company h1 {
    color: #fff;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 10px;
}
#company table {
    width: 980px;
    margin: 0 auto;
    margin-bottom: 60px;
}
#company table th {
    padding: 20px;
    width: 176px;
    color: #fff;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    border-bottom: solid 2px #fff;
}
#company table td {
    color: #fff;
    padding: 20px;
    border-bottom: solid 2px #fff;
}
#company dl {
    width: 880px;
    margin: 0 auto;
    background-color: #3a3a3a;
    padding: 25px 20px;
}
#company dl dt {
    float: left;
    color: #fff;
    font-weight: bold;
}
#company dl dd {
    margin-left: 216px;
    color: #fff;
}
/* フッター */
#footer {
    background-color: #000000;
    padding: 30px 0;
}
#footer #copyright {
    width: 980px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
/* ------------------------------------
奈良マラソン　黄緑×紫ver
------------------------------------ */
#nara-marathon #header {
    background-color: #521e82;
    box-shadow: none !important;
}
#nara-marathon #header .btn-contact a {
    background-color: #521e82;
}
#nara-marathon .main {
    width: 980px;
    margin: 0 auto;
    position: relative;
}
#nara-marathon .main-text {
    position: absolute;
    left: 15px;
    bottom: 15px;
}
#nara-marathon #main-image {
    background-image: none !important;
    background: linear-gradient(#521e82 0%, #ffffff 100%) !important;
}
#nara-marathon #main-image p {
    width: auto;
    margin: inherit !important;
}
#nara-marathon #main-image p img {
    margin-left: 0;
}
#nara-feature {
    padding: 50px 500% 70px;
    margin: 0 -500%;
}
#nara-feature h1 {
    text-align: center;
    color: #521e82;
    font-size: 4.4rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 10px;
}
#nara-feature h1 span {
    font-size: 3rem;
    font-weight: normal;
    display: block;
}
#nara-feature p {
    font-size: 2rem;
    color: #521e82;
    text-align: center;
    margin-bottom: 20px;
}
#nara-feature ul {
    width: 880px;
    margin: 0 auto;
    font-size: 2.4rem;
    padding: 50px 40px;
    position: relative;
    border: 10px solid #ccc;
}
#nara-feature li {
    font-weight: bold;
    color: #521e82;
}
#nara-feature ul:before {
    content: url(../nara-marathon/images/rannap.png);
    right: 20px;
    top: 50%;
    margin-top: -115px;
    position: absolute;
    z-index: 5;
}
#nara-marathon #howto-back {
    padding: 0px 500% 0;
    margin: 0 -500%;
    background-color: #b7cc03;
}
#nara-marathon #howto .clear {
    width: 980px;
    width: auto;
}
#nara-marathon #howto h1 {
    background-color: #521e82;
    text-align: center;
    font-size: 2.8rem;
    color: #fff;
}
#nara-marathon #howto p {
    color: #521e82;
    text-align: center;
    margin-bottom: 30px;
}
#nara-marathon .attach h2 {
    color: #521e82;
    text-align: center;
    font-size: 2.8rem;
}
#nara-marathon .buy-text {
    font-size: 2rem;
    font-weight: bold;
}
.width-auto {
    width: 980px;
    margin: 0 uto;
}