@charset "utf-8";
/*****************************************************************************************************
リセット
******************************************************************************************************/
body,
h1,h2,h3,h4,h5,h6,
p,
ul,ol,li,
dl,dt,dd {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img {
    vertical-align: middle;
}

/*****************************************************************************************************
フォント
******************************************************************************************************/
body {
    font-family: "SF Pro JP", "SF Pro Display", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "sans-serif";
    font-weight: 300;
    line-height: 1.5;
    color: #222;
    overflow-wrap: break-word;
}
h1,h2,h3,h4,h5,h6,strong,b {
    font-weight: 600;
}

/*****************************************************************************************************
リンク
******************************************************************************************************/
/* Dark Green */
a {
    text-decoration: none;
    color: #208A3D;
}
a:hover {
    color: #34C759;
}

/* Light Green */
a.l-green {
    color: #4FE669;
}
a.l-green:hover {
    color: #34C759;
}

/*****************************************************************************************************
リンク（ボタン）
******************************************************************************************************/
a.btn {
    display: inline-block;
    box-sizing: border-box;
    border: solid 1px;
    border-radius: 3px;
    padding: 0.5em 1em;
    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
a.btn:hover {
    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}

/* Dark Green */
a.btn.d-green {
    color: #208A3D;
    border-color: #208A3D;
    background-color: transparent;
}
a.btn.d-green:hover {
    color: #FFF;
    border-color: #208A3D;
    background-color: #208A3D;
}

/* Dark Green (Fill) */
a.btn.d-green-fill {
    color: #FFF;
    border-color: #208A3D;
    background-color: #208A3D;
}
a.btn.d-green-fill:hover {
    color: #FFF;
    border-color: #34C759;
    background-color: #34C759;
}

/* Light Green */
a.btn.l-green {
    color: #4FE669;
    border-color: #4FE669;
    background-color: transparent;
}
a.btn.l-green:hover {
    color: #FFF;
    border-color: #4FE669;
    background-color: #4FE669;
}

/* Dark Purple */
a.btn.d-purple {
    color: #663E80;
    border-color: #663E80;
    background-color: transparent;
}
a.btn.d-purple:hover {
    color: #FFF;
    border-color: #663E80;
    background-color: #663E80;
}

/* Dark Red */
a.btn.d-red {
    color: #993831;
    border-color: #993831;
    background-color: transparent;
}
a.btn.d-red:hover {
    color: #FFF;
    border-color: #993831;
    background-color: #993831;
}

/* Black */
a.btn.black {
    color: #000;
    border-color: #000;
    background-color: transparent;
}
a.btn.black:hover {
    color: #FFF;
    border-color: #000;
    background-color: #000;
}

/* White */
a.btn.white {
    color: #FFF;
    border-color: #FFF;
    background-color: transparent;
}
a.btn.white:hover {
    color: #000;
    border-color: #FFF;
    background-color: #FFF;
}

/*****************************************************************************************************
汎用クラス
******************************************************************************************************/
.clearfix:after {
    content: "";
    clear: both;
    display: block;
}
.secret{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(0 0 99.9% 99.9%);clip-path:inset(0 0 99.9% 99.9%);overflow:hidden;height:1px;width:1px;padding:0;border:0}









/*****************************************************************************************************
背景
******************************************************************************************************/
body {
    background-color: #F2F2F7;
    position: relative;
}
.background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}
img.semicircle-1,
img.semicircle-2 {
    position: absolute;
    left: 50%;
}
img.semicircle-1 {
    top: 0;
    margin-left: -800px;
}
img.semicircle-2 {
    top: 150px;
    margin-left: 400px;
}
@media only screen and (max-width: 820px) {
    img.semicircle-1 {
        margin-left: -600px;
    }
    img.semicircle-2 {
        display: none;
    }
}
@media only screen and (max-width: 700px) {
    img.semicircle-1 {
        margin-left: -500px;
    }
}

/*****************************************************************************************************
Claris FileMaker を体験してみましょう
******************************************************************************************************/
.intro {
    max-width: 1030px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 75px 15px 50px 15px;
    text-align: center;
}

.intro h1 {
    font-size: 200%;/*32*/
}
.intro h1 br {
    display: none;
}

.intro p {
    font-size: 100%;/*16*/
    margin-top: 1em;
}

@media only screen and (max-width: 700px) {
    .intro h1 br {
        display: inline;
    }
    .intro p br {
        display: none;
    }
}

a.expandable-switch {
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
a.expandable-switch i.fa.fa-minus-square-o {
    display: none;
}

.expandable-box {
    display: none;
    padding-bottom: 10px;
}

/*****************************************************************************************************
Claris ロゴ
******************************************************************************************************/
img.claris-logo {
    height: 30px;
    position: absolute;
    top: 15px;
    left: 15px;
}

/*****************************************************************************************************
無料評価版ボタン
******************************************************************************************************/
a.trial-btn {
    font-size: 81.3%;/*13*/
    position: fixed;
    top: 10px;
    right: 10px;
}
@media only screen and (max-width: 820px) {
    a.trial-btn {
        position: absolute;
    }
}

/*****************************************************************************************************
Topに戻る
******************************************************************************************************/
a#top {
	position: absolute;
    top: 0;
}

a.back-to-top {
    display: block;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    bottom: -50px;
    z-index: 8;
    transition: bottom 0.5s;
}
a.back-to-top.scrolled {
	bottom: 20px;
	transition: bottom 0.5s;
}

a.back-to-top img {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    transition: top 0.25s;
}
a.back-to-top img:hover {
    top: -4px;
    transition: top 0.25s;
}








/*****************************************************************************************************
フィルター
******************************************************************************************************/
.filters_area {
    background-color: #FFF;
    padding: 25px 0;
}

ul.filters {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    letter-spacing: -.4em;
}
ul.filters li {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    padding: 5px 3px;
}

.filter {
    display: block;
    cursor: pointer;
    user-select: none;
    height: 40px;
    font-size: 81.3%;/*13*/
    line-height: 38px;
    color: #000;
    box-sizing: border-box;
    border: solid 1px #999;
    border-radius: 20px;
    padding: 0 13px;
    transition: background-color 0.25s;
}
.filter:hover,
.filter.selected {
    color: #FFF;
    background-color: #999;
    transition: background-color 0.25s;
}

/* フィルターのアイコン ***************************************/
.filter_icon {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background-size: 24px 48px;
    background-repeat: no-repeat;
    background-position: left top;
    margin-right: 10px;
}
.filter:hover .filter_icon,
.filter.selected .filter_icon {
    background-position: left bottom;
}

.all    .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_all.png"); }
.w1     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w1.png"); }
.w2     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w2.png"); }
.w3     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w3.png"); }
.w4     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w4.png"); }
.w5     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w5.png"); }
.w6     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w6.png"); }
.w7     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w7.png"); }
.w8     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w8.png"); }
.w9     .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w9.png"); }
.w10    .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w10.png"); }
.w11    .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w11.png"); }
.w12    .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_w12.png"); }
.others .filter_icon { background-image: url("https://www.aoiuo.com/0420_461_filter_others.png"); }









/*****************************************************************************************************
アプリ
******************************************************************************************************/
.apps_area {
    background-color: #FFF;
    padding: 0 5px 50px 5px;
}

ul.apps {
    max-width: 1000px;
    margin: 0 auto;
    letter-spacing: -.4em;
}

.app {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 5px;
    width: 16.66%;
}
@media only screen and (max-width: 820px) {
    .app {
        width: 25%;
    }
}
@media only screen and (max-width: 700px) {
    .app {
        width: 50%;
    }
}

.app a {
    display: block;
    box-sizing: border-box;
    border: solid 1px rgba(0,0,0,0);
    border-radius: 5px;
    padding: 15px 10px 10px 10px;
    transition: border-color 0.25s;
}
.app a:hover {
    border-color: rgba(0,0,0,0.25);
    transition: border-color 0.25s;
}

.app h3 {
    font-weight: 300;
    font-size: 81.3%;/*13*/
    color: #000;
    text-align: center;
    margin-top: 10px;
}

/* アプリのアイコン ***************************************/
.app .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 22.5%;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3);
    background-repeat: no-repeat;
    background-size: 60px 60px;
    background-position: 0 0;
}


.app-0102 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0102.png"); }
.app-0101 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0101.png"); }
.app-0100 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0100.png"); }

.app_0098 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0098.png"); }
.app_0097 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0097.png"); }

.app_0095 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0095.png"); }
.app_0094 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0094.png"); }
.app_0093 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0093.png"); }
.app_0092 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0092.png"); }
.app_0091 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0091.png"); }
.app_0090 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0090.png"); }
.app_0089 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0089.png"); }
.app_0088 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0088.png"); }
.app_0087 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0087.png"); }
.app_0086 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0086.png"); }
.app_0085 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0085.png"); }
.app_0084 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0084.png"); }
.app_0083 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0083.png"); }
.app_0082 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0082.png"); }
.app_0081 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0081.png"); }
.app_0080 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0080.png"); }
.app_0079 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0079.png"); }
.app_0078 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0078.png"); }
.app_0077 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0077.png"); }
.app_0076 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0076.png"); }
.app_0075 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0075.png"); }

.app_0070 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0070.png"); }
.app_0069 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0069.png"); }
.app_0068 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0068.png"); }
.app_0067 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0067.png"); }
.app_0066 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0066.png"); }
.app_0065 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0065.png"); }
.app_0064 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0064.png"); }
.app_0063 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0063.png"); }
.app_0062 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0062.png"); }
.app_0061 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0061.png"); }
.app_0060 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0060.png"); }
.app_0059 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0059.png"); }
.app_0058 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0058.png"); }
.app_0057 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0057.png"); }
.app_0056 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0056.png"); }
.app_0055 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0055.png"); }
.app_0054 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0054.png"); }
.app_0053 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0053.png"); }
.app_0052 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0052.png"); }
.app_0051 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0051.png"); }
.app_0050 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0050.png"); }
.app_0049 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0049.png"); }
.app_0048 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0048.png"); }
.app_0047 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0047.png"); }
.app_0046 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0046.png"); }
.app_0045 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0045.png"); }
.app_0044 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0044.png"); }
.app_0043 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0043.png"); }
.app_0042 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0042.png"); }
.app_0041 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0041.png"); }
.app_0040 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0040.png"); }
.app_0039 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0039.png"); }
.app_0038 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0038.png"); }
.app_0037 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0037.png"); }
.app_0036 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0036.png"); }
.app_0035 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0035.png"); }
.app_0034 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0034.png"); }
.app_0033 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0033.png"); }
.app_0032 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0032.png"); }
.app_0031 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0031.png"); }
.app_0030 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0030.png"); }
.app_0029 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0029.png"); }
.app_0028 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0028.png"); }
.app_0027 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0027.png"); }
.app_0026 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0026.png"); }
.app_0025 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0025.png"); }
.app_0024 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0024.png"); }
.app_0023 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0023.png"); }
.app_0022 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0022.png"); }
.app_0021 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0021.png"); }
.app_0020 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0020.png"); }
.app_0019 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0019.png"); }
.app_0018 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0018.png"); }
.app_0017 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0017.png"); }

.app_0015 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0015.png"); }
.app_0014 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0014.png"); }
.app_0013 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0013.png"); }
.app_0012 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0012.png"); }
.app_0011 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0011.png"); }
.app_0010 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0010.png"); }
.app_0009 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0009.png"); }
.app_0008 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0008.png"); }
.app_0007 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0007.png"); }
.app_0006 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0006.png"); }
.app_0005 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0005.png"); }
.app_0004 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0004.png"); }
.app_0003 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0003.png"); }
.app_0002 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0002.png"); }
.app_0001 .icon { background-image: url("https://www.aoiuo.com/0420_461_app_0001.png"); }







/*****************************************************************************************************
フッター
******************************************************************************************************/
.footer {
    background-color: #2C2C2E;
    padding: 50px 15px;
}
.footer > div {
    max-width: 1000px;
    margin: 0 auto;
}

p.footer_copy {
    font-size: 75%;/*12*/
    color: #AAA;
}

ul.footer_link {
    font-size: 75%;/*12*/
}
ul.footer_link li {
    display: inline-block;
    vertical-align: top;
    margin: 1em 1em 0 0;
}
ul.footer_link li a {
    color: #FFF;
}
ul.footer_link li a:hover {
    color: #34C759;
}